Bootstrap 컨테이너 요소에는 행 요소가 포함되어야합니까?

Bootstrap 컨테이너 요소에는 행 요소가 포함되어야합니까?

---

문서를 읽었을 때 를 포함하는 div와 (x의 합계가 12)에 .container대한 "부모"래퍼 인 것 같습니다 . 그러나 탐색 예제에 있는 것 같지 않습니다 ..row.spanX.row

또한 설명서 사이트 .container에서은 몇 개의 navbar 관련 div로 래핑됩니다.

누구든지 프레임 워크가 어떻게 작동해야하는지 조금 자세히 설명해 줄 수 있습니까? 나는 그것에 익숙하지 않다.

---

.row클래스는되지 필요한 돌며 .container,하지만 당신은 나중에 여러 행을 원하는 넣다 시작할 때 어쨌든 그것을 포함하는 좋은 아이디어이다.

그 모든 .row진짜로 확실히 그것의 내부의 div의 모든 이전 및 다음에서 분리 된 자신의 라인에 표시되는 것을 확인입니다 .rows.

을 위해 .container의 내부 .navbar페이지의 나머지 부분과 네비게이션 바에 라인을 구성하는 데 필요한 별도의 일이 된 div. 렌더링 된 HTML을 더 아래로 보면 div .container내부에없는 다른 것이 .navbar있고 모든 주요 콘텐츠가있는 것을 볼 수 있습니다.

완전한 예

<div class="container">
  <div class="row">
    <!-- These divs are inline and do NOT fill up the full 12 columns -->
    <div class="span4">...</div>
    <div class="span4">...</div>
  </div>

  <!-- This is a automatically a new line of divs -->
  <div class="row">
    <!-- This div will appear below the previous row, even though it
      would fit next to the other divs -->
    <div class="span4"></div>
  </div>

  <!-- These will appear in their own row, but may act
    unexpectedly in certain situations -->
  <div class="span4"></div>
  <div class="span4"></div>
</div>

간단히

.row이름에서 알 수 있듯이 div 행을 정의합니다. 위의 줄이 꽉 찼는 지 여부에 관계없이 각 줄은 새로운 div 줄을 나타냅니다.

---

대답은 주어진 것보다 훨씬 간단합니다. 아니요, .container특정 코드를 포함 할 필요가 없으며 포함 된 내용에 대한 부담도 없습니다 ...

그 .container안에 래핑 된 모든 요소의 크기를 "포함"하는 "래퍼"역할을합니다. 그리고 .container페이지 또는 구성 요소를 포장 할 수 있습니다. 따라서 Twitter Bootstrap의 문서와 유사한 페이지를 원하는 경우 너비가 "고정"되고 양쪽에 동일한 여백 .container이있는 경우 페이지의 모든 콘텐츠를 래핑하는 데 하나만 필요합니다.

다른 용도 .container도 있습니다. Bootstrap 문서 ( .navbar-fixed-top) 의 상단 탐색 모음이 화면의 전체 너비에 걸쳐 있지만 탐색 모음 내부의 탐색 항목이 콘텐츠 너비에 "포함"되어 있음을 알고 계셨습니까? 이것은 .navbar-fixed-top내부가 .container아니라 .nav내부이기 때문입니다.

---

부트 스트랩 그리드는 최대 12 개까지 추가 할 수있는 한 행 내에서 임의의 조합으로 조정할 수있는 12 개의 열로 구성됩니다. 서로 다른 행을 구분하는 테이블 행과 같은 포함 행으로 생각할 수 있습니다. 내용. 그리드 내에서 .row컨테이너에는 별도의 작업이 있으며 화면 크기 (반응 형 시트가 포함 된 경우)에 따라 달라지는 마지막 그리드 열 거터 너비를 재조정하는 데 필요합니다 (필수). .row클래스 뒤에있는 CSS를 살펴보면 margin-left:-30px기본적으로 속성이 있음 을 알 수 있습니다 (다시 한 번 화면 크기에 따라 크거나 작을 수 있음), 마지막 열에서 거터를 "제거"하는 속성 행에서; 그것 없이는 그리드가 거터를 재조정하지 않고 두 번째 라인으로 끊어 질 것입니다.

이제 .row컨테이너가 컨테이너의 자식 인 .container이유는 .row컨테이너가 페이지의 중앙 콘텐츠 위에 섹션 등을 포함하지 않고 콘텐츠의 "라인"을 분리하기위한 것이므로 따라서 내비게이션 예제에 하나가없는 이유는 nav 요소가 격자가 아닌 전체 블록 요소이기 때문에 거터 너비가 부족하다는 사실 때문일 것입니다. 마지막 느슨한 거터를 재설정하십시오.

참조 URL : https://stackoverflow.com/questions/12994012/must-bootstrap-container-elements-include-row-elements