[css] 다중 및 / 또는 중첩 된 부트 스트랩 컨테이너?

Program / 글쓴이

내 이해 는 모든 Bootstrap 스타일 요소가 요소 내부에 존재해야한다는 것 <div class="container">입니다. 하지만 때때로 여러 “컨테이너”가있는 부트 스트랩 예제를 봅니다.

<div class="container">
    <!-- Blah, GUI stuff, blah -->
</div>

...

<div class="container">
    <!-- Blah, more GUI stuff, blah -->
</div>

내 질문 :

  1. 여러 “컨테이너 div”가있는 단일 HTML 페이지가 언제 필요할까요? 하나의 큰 “컨테이너 div”안에 몸 전체를 넣는 것과는 대조적으로 어떤 이점이 있습니까?
  2. “컨테이너 div”를 다른 내부에 중첩하고 싶습니까? 언제 / 왜?

답변

  1. 페이지의 일부 섹션은 전체 뷰포트 너비에 걸쳐 있고 다른 섹션은 그렇지 않습니다. 일부 배경은 전체 너비이지만 콘텐츠는 그렇지 않습니다.

    이에 대한 예는 뷰포트의 전체 너비 인 배경 이미지 또는 색상이 있지만 그 내부의 콘텐츠, 형태 등이 .container주어진 뷰포트 너비를 초과하지 않는 특징 영역입니다.

  2. 당신은 중첩하지 .container않거나 .container-fluid– 문서를 참조하십시오 . 그건 꼭 필요 하진 않아.

    문서 : 부트 스트랩은 사이트 콘텐츠를 감싸고 그리드 시스템을 수용하기 위해 포함 요소가 필요합니다. 프로젝트에 사용할 두 개의 컨테이너 중 하나를 선택할 수 있습니다. 패딩 등으로 인해 어느 컨테이너도 중첩 가능하지 않습니다. [.container 및 .container-fluid가 중첩되지 않는다는 의미도 아닙니다].

답변

일부 말한 달리 둥지 캔 container-fluid, 안쪽을 container. 공식 부트 스트랩 웹 사이트에도 예가 있습니다.

http://getbootstrap.com/examples/navbar/

답변

4.3 문서의 레이아웃 섹션 인 https://getbootstrap.com/docs/4.3/layout/overview/#containers 에서 이제 다음과 같이 표시됩니다.

컨테이너 는 중첩 될 수 있지만 대부분의 레이아웃에는 중첩 된 컨테이너가 필요하지 않습니다.

다른 사람들이 패딩 등에 대해 언급 한 내용에 유의하십시오.

답변

실제로 그것은 전적으로 디자이너의 요구 사항에 달려 있습니다.

때로는 행의 전체 너비가 필요합니다 (즉, 별도의 컨테이너 클래스없이 달성 할 수있는 뷰포트 또는 보이는 부분의 스트립을 의미합니다)

http://binarytheme.com/demos?theme=bootsrap-landing-page-blue

이해하려면 위의 템플릿 예제를 참조하십시오.

답변

시간을 절약 하고 네이티브 CSS 그리드 인 Css-grid로 전환하세요 .

부트 스트랩 컨테이너에는 12 개 열 제한, 10 픽셀 패딩 문제를 찾는 경우 제한이 있습니다. 사용자가 자신의 컴퓨터에 다운로드해야하는 경우 기본이 아닌 (CSS 내장), 그리고 그 숫자에 추가됩니다. 처리해야하는 다이빙의.

이 모든 것을 염두에두고 시도해보고 CSS-grid로 전환
하는 것은 시작하기에 좋은 놀이터입니다.

이제 CSS-grid의 단점은 여전히 ​​IE와 호환되지 않는다는 것입니다.

답변