Behälter

Wie sie arbeiten

Container sind das grundlegendste Layoutelement in Bootstrap und werden benötigt, wenn Sie unser Standardrastersystem verwenden . Container werden verwendet, um den Inhalt darin aufzunehmen, aufzufüllen und (manchmal) zu zentrieren. Während Container verschachtelt werden können , erfordern die meisten Layouts keinen verschachtelten Container.

Bootstrap wird mit drei verschiedenen Containern geliefert:

• .container, wodurch max-widthan jedem reaktionsfähigen Haltepunkt ein festgelegt wird
• .container-fluid, was width: 100%an allen Haltepunkten ist
• .container-{breakpoint}, also width: 100%bis zum angegebenen Haltepunkt

Die folgende Tabelle veranschaulicht, wie die einzelnen Container im max-widthVergleich zum Original .containerund .container-fluidüber jeden Haltepunkt hinweg abschneiden.

Sehen Sie sie in Aktion und vergleichen Sie sie in unserem Grid-Beispiel .

Standardcontainer

Unsere Standardklasse .containerist ein reaktionsschneller Container mit fester Breite, d. h. seine max-widthÄnderungen an jedem Haltepunkt.

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

Responsive Container

Responsive Container ermöglichen es Ihnen, eine Klasse anzugeben, die 100 % breit ist, bis der angegebene Breakpoint erreicht ist, wonach wir max-widths für jeden der höheren Breakpoints anwenden. Beispielsweise .container-smist 100 % breit, um zu beginnen, bis der smHaltepunkt erreicht ist, wo es mit md, lg, xl, und hochskaliert wird xxl.

<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>

Flüssigkeitsbehälter

Verwenden Sie dies .container-fluidfür einen Container in voller Breite, der sich über die gesamte Breite des Ansichtsfensters erstreckt.

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

Sass

Wie oben gezeigt, generiert Bootstrap eine Reihe vordefinierter Containerklassen, um Ihnen beim Erstellen der gewünschten Layouts zu helfen. Sie können diese vordefinierten Containerklassen anpassen, indem Sie die Sass-Karte (zu finden in _variables.scss) ändern, die sie antreibt:

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

Neben der Anpassung des Sass können Sie mit unserem Sass-Mixin auch Ihre eigenen Container erstellen.

// 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();
}

Weitere Informationen und Beispiele zum Ändern unserer Sass-Maps und -Variablen finden Sie im Sass-Abschnitt der Grid-Dokumentation .