내 이해 는 모든 Bootstrap 스타일 요소가 요소 내부에 존재해야한다는 것 <div class="container">입니다. 하지만 때때로 여러 "컨테이너"가있는 부트 스트랩 예제를 봅니다.
<div class="container">
<!-- Blah, GUI stuff, blah -->
</div>
...
<div class="container">
<!-- Blah, more GUI stuff, blah -->
</div>
내 질문 :
답변:
페이지의 일부 섹션은 전체 뷰포트 너비에 걸쳐 있고 다른 섹션은 그렇지 않습니다. 일부 배경은 전체 너비이지만 콘텐츠는 그렇지 않습니다.
이에 대한 예는 뷰포트의 전체 너비 인 배경 이미지 또는 색상이 있지만 그 내부의 콘텐츠, 형태 등이 .container주어진 뷰포트 너비를 초과하지 않는 특징 영역입니다.
당신은 중첩하지 .container않거나 .container-fluid- 문서를 참조하십시오 . 그건 꼭 필요 하진 않아.
문서 : 부트 스트랩은 사이트 콘텐츠를 감싸고 그리드 시스템을 수용하기 위해 포함 요소가 필요합니다. 프로젝트에 사용할 두 개의 컨테이너 중 하나를 선택할 수 있습니다. 패딩 등으로 인해 어느 컨테이너도 중첩 가능하지 않습니다. [.container 및 .container-fluid가 중첩되지 않는다는 의미도 아닙니다].
.container-fluid주요 사이트가 내부에 앉아있는 동안 어떤 종류의 탐색 모음 또는 배너와 같은 뭔가 .container.
.container-fluid패널 내부의 행 / 열을 둘러싼 클래스 가 필요합니다 . 그렇지 않으면 가로 스크롤바가 표시됩니다 (패널 내부의 오버플로가 숨김으로 설정되어 있지 않는 한-하지만 원하지 않을 수도 있습니다. 내부에 많은 데이터가있는 경우 스크롤바를 원할 수도 있습니다.
일부 말한 달리 둥지 캔 container-fluid, 안쪽을 container. 공식 부트 스트랩 웹 사이트에도 예가 있습니다.
container중첩 a가 포함됩니다 container-fluid. view-source : getbootstrap.com/docs/3.3/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와 호환되지 않는다는 것입니다.