[해결]페이지 여백 이동(bootstrap3.css사용시)

질문Q #3020

쿠사2014-12-28 15:01:56

메인페이지에는 없는데
세부 페이지에 삽입되어있습니다.

그런데 메인에서는 화면이 정중앙에 출력이 되는데 bootstrap3.css를 적용하면 화면이 7px정도 우측으로 살짝 이동을 하는게 눈에 보이네요.
bootstrap3.css의 설정이 조금 잘못되어있는것같은데 혹시 다른분들은 이런경우 없으셨는지....
(bootstrap3.css의 경우 받아서 쓰는 소스이기에 함부로 건드려도 될지 잘 모르겠네요... 어느부분인지도 아직 못찾았고..)

답변3

#1 수야디벨 2014-12-29 10:27:09

reset 문제인거 같네요.

혹시 퍼블리싱 작업할때 reset.css 의미를 아시는지요?

reset.css란 말그대로, 내가 퍼블리싱 하기전에 일정한 규칙을 정해놓고 사용하자 라는 의미로 만드는 css 인데,

대충 li 태그의 스타일 제거, 기본 폰트 설정, 등등의 기초 설정이 들어갑니다.

근데 문제는, bootstrap은 아예 기본적으로 reset이 포함되어 있어요.

부트스트랩을 열면 맨 처음줄부터 나오는 html , body , article.. 등등에 대한 설정이 reset 입니다.

이를 해결하려면, bootstrap을 가장 맨 최상위 로더로 불러오고,

하위 스타일에서 적절히 css를 수정하시는 방법 밖에 없습니다.

부트스트랩 배포 소스를 직접 수정해서 사용해도 되는진 저도 잘 모르겠네요 .

이 부분은 라이센스 정책을 검색해 보신다음에 적절히 조취하시면 되실거 같아요 ^^~

#2 implemental 2014-12-29 15:12:49

부트스트랩으로 작업 하나 끝내면서 느낀 점은 왠만하면 직접 수정하는 것은 피하는 것 어떨까 합니다.

저는 개인적으로 진행 하면서 아래와 같이 사용했습니다.

<! -- basic styles -->
<link href="/asset/css/bootstrap.min.css" rel="stylesheet" />

 <!-- page specific plugin styles -->
기타 외부 플러그인을 사용했을 때 해당 CSS 파일

<!-- fonts -->
폰트 관련 CSS

<!-- custom styles -->
<link href="/asset/css/style.css" rel="stylesheet" />

가장 밑에 style.css에다가 사이트에 맞게 수정해서 작업했습니다.

#3 쿠사 2014-12-30 12:00:36

수야디벨, implementa // 답변 감사합니다. 오류가 발생한 이유는 bootstrap2.버전은 우측 스크롤바를 포함하지 않은 화면을 화면의 폭으로, bootstrap3는 우측스크롤바를 포함한 화면을 화면의 폭으로 화면사이즈를 잡는것 같더라구요. 그런데 보다보니 3.버전이 있는데 2.버전을 혼용해서 써야되나 싶어서 저는 2.버전을 제거하고 기존에 2.으로 쓰던 자잘한 부분들을 3.에 맞게 수정해나가는 중입니다.
답변 감사합니다~