Bootstrap Containers (Контейнеры)

Как они работают

Контейнеры - это самый основной элемент макета в Bootstrap, который требуется при использовании нашей сеточной системы по умолчанию . Контейнеры используются для содержания, заполнения и (иногда) центрирования содержимого внутри них. Хотя контейнеры могут быть вложенными, для большинства макетов вложенный контейнер не требуется.

Bootstrap поставляется с тремя разными контейнерами:

• .container, который устанавливает max-width в каждой ответной точке останова
• .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% в ширину , чтобы начать , пока sm точка останова не будет достигнуто, где она будет масштабироваться с md, lg, xl и xxl.

<div class="container-sm">Ширина 100 % до небольшой контрольной точки</div>
<div class="container-md">Ширина 100 % до средней контрольной точки</div>
<div class="container-lg">Ширина 100 % до большой контрольной точки</div>
<div class="container-xl">Ширина 100% до очень большой контрольной точки</div>
<div class="container-xxl">Ширина 100 % до очень большой контрольной точки</div>

Fluid containers

Используется .container-fluid для контейнера полной ширины, охватывающего всю ширину области просмотра.

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

Sass

Как показано выше, Bootstrap генерирует серию предопределенных контейнерных классов, чтобы помочь вам создать желаемые макеты. Вы можете настроить эти предопределенные классы контейнеров, изменив карту Sass (находится в _variables.scss), которая их поддерживает :

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

Помимо настройки Sass, вы также можете создавать свои собственные контейнеры с помощью нашего миксина Sass.

// 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 документации Grid.