컨테이너

작동 방식

컨테이너는 부트스트랩에서 가장 기본적인 레이아웃 요소이며 기본 그리드 시스템을 사용할 때 필요합니다 . 컨테이너는 내용을 포함하고 채우고 (때로는) 내용을 가운데에 맞추는 데 사용됩니다. 컨테이너 를 중첩 할 수 있지만 대부분의 레이아웃에는 중첩 컨테이너가 필요하지 않습니다.

부트스트랩은 세 가지 다른 컨테이너와 함께 제공됩니다.

• .containermax-width, 각 응답 중단점에서 a를 설정합니다.
• .container-fluid, 이는 width: 100%모든 중단점에 있습니다.
• .container-{breakpoint}, width: 100%지정된 중단점까지

아래 표는 각 컨테이너가 max-width원본 .container과 .container-fluid각 중단점에서 어떻게 비교되는지 보여줍니다.

그것들을 실제로 보고 그리드 예제 에서 비교하십시오 .

기본 컨테이너

기본 .container클래스는 반응형 고정 너비 컨테이너로, max-width각 중단점에서 변경 사항을 의미합니다.

<div class="container">
  <!-- Content here -->
</div>

반응형 컨테이너

반응형 컨테이너를 사용하면 지정된 중단점에 도달할 때까지 너비가 100%인 클래스를 지정할 수 있으며, 그 이후 max-width에는 더 높은 각 중단점에 적용됩니다. 예를 들어, 중단점에 도달 .container-sm할 때까지 너비가 100%이고 , , 및 로 확장됩니다 .smmdlgxlxxl

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

액체 용기

.container-fluid뷰포트의 전체 너비에 걸쳐 있는 전체 너비 컨테이너에 사용 합니다.

<div class="container-fluid">
  ...
</div>

사스

위에 표시된 것처럼 Bootstrap은 원하는 레이아웃을 빌드하는 데 도움이 되는 일련의 미리 정의된 컨테이너 클래스를 생성합니다. 다음과 같이 미리 정의된 컨테이너 클래스를 제공하는 Sass 맵( 에 있음 _variables.scss)을 수정하여 사용자 정의할 수 있습니다.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Sass를 사용자 정의하는 것 외에도 Sass mixin을 사용하여 고유한 컨테이너를 만들 수도 있습니다.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

Sass 맵과 변수를 수정하는 방법에 대한 자세한 정보와 예제 는 그리드 문서의 Sass 섹션을 참조하십시오 .