Bootstrap 3 - container & container-fluid

Bootstrap 3 - container & container-fluid

공식 메뉴얼에도 잘 나와 있듯이 이 두개의 클래스는 중첩으로 사용될 수 없다. 컨테이너에는 여백이 포함되어 있어 중첩으로 사용하면 엘리먼트가 원하는 위치에서 벗어나게 된다.

하지만 container -> container-fluid 와 container-fluid -> conatiner-fluid 는 중첩으로 사용해도 되는 것 같다.

단 container-fluid -> container 는 안된다.

데모 http://jsbin.com/budekat/edit?html,output

<div class="container" style="background-color: red;">
container
   <div class="container-fluid" style="background-color: green;">
       child container-fluid
   </div>
</div>
  
<hr />
<div class="container-fluid" style="background-color: red;">
container-fluid
   <div class="container-fluid" style="background-color: green;">
       child container-fluid
   </div>
</div>

위와 같이 말이다.

그리고 부트스트랩 반응형 기능을 제외한 non-responsive.css 사용하면 일정 넓이 사이즈를 줄이게 되면 오른쪽에 원하지 않던 여백이 생겨 하단 스크롤이 노출되는 문제가 발생한다.

간단해보여도 모른고 컨테이너를 중첩으로 사용했다가는 ... 문제를 해결하려고 강제로 여백을 제거하는 작업을 추가로 한다면 문제는 점점 hell로 접어들게 된다...

Syaku Blog by Seok Kyun. Choi. 최석균.