Gámar

Hvernig þeir virka

Gámar eru grunnútlitsþátturinn í Bootstrap og eru nauðsynlegir þegar sjálfgefið netkerfi okkar er notað . Gámar eru notaðir til að geyma, púða og (stundum) miðja innihaldið innan þeirra. Þó að hægt sé að hreiðra gáma, krefjast flest skipulag ekki hreiðurs gáms.

Bootstrap kemur með þremur mismunandi ílátum:

• .container, sem setur a max-widthvið hvert móttækilegt brot
• .container-fluid, sem er width: 100%á öllum brotastöðum
• .container-{breakpoint}, sem er width: 100%fram að tilgreindum brotpunkti

Taflan hér að neðan sýnir hvernig hver ílát er í max-widthsamanburði við upprunalegan .containerog .container-fluidyfir hvern brotpunkt.

Sjáðu þau í aðgerð og berðu þau saman í Grid dæminu okkar .

Sjálfgefinn gámur

Sjálfgefinn .containerflokkur okkar er móttækilegur gámur með fastri breidd, sem þýðir max-widthbreytingar á hverjum brotpunkti.

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

Móttækilegir gámar

Móttækir gámar gera þér kleift að tilgreina flokk sem er 100% breiður þar til tilgreindum brotpunkti er náð, eftir það notum við max-widths fyrir hvert af hærri brotpunktunum. Til dæmis, .container-smer 100% breitt til að byrja þar til smbrotpunkti er náð, þar sem það mun stækka með md, lg, xl, og 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>

Vökvaílát

Notaðu .container-fluidfyrir ílát í fullri breidd, sem spannar alla breidd útsýnisgáttarinnar.

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

Sass

Eins og sýnt er hér að ofan býr Bootstrap til röð af fyrirfram skilgreindum gámaflokkum til að hjálpa þér að byggja upp skipulag sem þú vilt. Þú getur sérsniðið þessa fyrirfram skilgreindu gámaflokka með því að breyta Sass kortinu (finnst í _variables.scss) sem knýr þá:

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

Auk þess að sérsníða Sass geturðu líka búið til þína eigin ílát með Sass mixinu okkar.

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

Fyrir frekari upplýsingar og dæmi um hvernig á að breyta Sass kortum okkar og breytum, vinsamlegast skoðaðu Sass hlutann í Grid skjölunum .