부트 스트랩 그리드 시스템 컨테이너/중첩

Question

마침내 부트 스트랩 그리드 시스템에 익숙해지고 있지만 나는 아직도 몇 가지 사항에 혼란스러워하고 있습니다. 내가 그들의 문서에서 알

그들은 용기가 중첩 가능한 NOT 말하는 :

부트 스트랩이 사이트의 내용을 포장하고 우리의 그리드 시스템을 수용하기 위해 포함 된 요소가 필요합니다. 프로젝트에서 사용할 두 개의 컨테이너 중 하나를 선택할 수 있습니다. 패딩 등으로 인해 컨테이너가 중첩되지 않습니다.

하지만 실제로 그 의미는 무엇입니까? 그들은 컨테이너를 중첩 할 때마다 왼쪽과 오른쪽에 여분의 15px 여백이있을 것이라는 점을 제외하고는 내게 중첩 할 수있는 것으로 보입니다. (내가 예상했던대로).

그들이 중첩 가능하다고 말하면 직접 부모/자식 중첩을 의미합니까?

바이올린 : 내가 만든 레이아웃의 바이올린을 만들었습니다 https://jsfiddle.net/wt69swkg/1/

. 레이아웃은 컨테이너를 사용하여 초기 바디 구조를 만듭니다. 그런 다음 배경색을 설정하려면 renderbody div가 있습니다. 마지막으로 div 클래스가 인 renderbody-inner 너비가 95 %이고 여백이 auto 인 경우 divter가 2.5 인 구형 몸체를 만듭니다. 왼쪽과 오른쪽 %.

이것은 내가 container-container-fluid를 renderbody-inner 내부에 사용해야하므로 col- * s를 사용할 수 있습니까? 바깥쪽에있는 가장 큰 컨테이너는 % 기반 너비가있는 div로 채웠기 때문에 쓸데없는 것입니까?

^이 예제는 기술적으로 중첩 컨테이너이지만 직접적인 부모/자식이 아닙니다. 이것은 나를 혼란스럽게합니다. 나는 하루가 끝나면 내가 원하는 것을 할 수 있다는 것을 깨닫는다. 그러나 나는 문서/모범 사례를 따르기 위해 최선을 다하고 있습니다.

<div class="container"> 
    <div id="renderbody"> 
     <div id="renderbody-inner"> 
      <div class="container-fluid"> 
       <!--Rendering body content here--> 
       <div style="height:200px; background-color:darkgrey"> 

       </div> 
      </div> 
     </div> 
    </div> 
</div> 

편집 : 나는 내 질문에 제공하는 정확한 견적을 제공하여 답을 그 질문에 대한 Multiple and/or nested Bootstrap containers?

답변 : 이에 중복되지 않습니다. 그들은 내 질문에 대답하지 않는다 왜? 또는 설명을 제공하십시오. (내가 뭘 요구하는지)

Answer 1

이렇게하지 마십시오. 더 좋은 질문은 왜 처음에 그것들을 중첩시키고 자하는지입니다.

컨테이너는 고정 너비의 미디어 쿼리에 응답합니다. Bootstrap의 다른 모든 것들은 백분율을 사용합니다. 백분율은이 초기 고정 폭에서 유래합니다. 2를 사용하면 눈에 띄는 패딩과 가로 스크롤과 같은 이상한 효과가 많이 나타날 것입니다. CSS 해킹으로이를 취소 할 수는 있지만 그 이유는 처음부터 왜 이렇게합니까?

등

body 
    container 
    row 
     col 
     row 
      col 

그리고, 때 자주 싶습니다

나는 당신이 항상이 같은 일을 기대하는 그리드 모델에 전형적인 HTML/CSS에서 전환하고 고민 할 수 어떻게 생각 일부 중간 비 부트 스트랩 태그.이 클래스를 사용하여이 적응할 수 :

.box { 
    float: left; 
    width: 100%; 
} 

코드 예제과 같이 작업 할 수 있도록 :

<div class="container"> 
    <div id="renderbody" class=box> 
     <div id="renderbody-inner" class=box> 
      <div class="row"> 
       <div class="col-sm-6">Test</div> 
       <div class="col-sm-6">Test</div> 
      </div> 
     </div> 
    </div> 
</div> 

https://jsfiddle.net/b9chris/vdh8stnd/