Houers

Hoe hulle werk

Houers is die mees basiese uitlegelement in Bootstrap en word vereis wanneer ons ons verstekroosterstelsel gebruik . Houers word gebruik om die inhoud daarin te bevat, op te vul en (soms) te sentreer. Alhoewel houers geneste kan word, benodig die meeste uitlegte nie 'n geneste houer nie.

Bootstrap kom met drie verskillende houers:

• .container, wat 'n max-widthby elke responsiewe breekpunt stel
• .container-{breakpoint}, wat width: 100%tot die gespesifiseerde breekpunt is
• .container-fluid, wat width: 100%by alle breekpunte is

Die tabel hieronder illustreer hoe elke houer s'n max-widthvergelyk met die oorspronklike .containeren .container-fluidoor elke breekpunt.

Sien hulle in aksie en vergelyk hulle in ons Grid-voorbeeld .

Verstekhouer

Ons verstekklas .containeris 'n responsiewe houer met vaste breedte, wat beteken dat dit max-widthby elke breekpunt verander.

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

Responsiewe houers

Responsiewe houers laat jou toe om 'n klas te spesifiseer wat 100% wyd is totdat die gespesifiseerde breekpunt bereik word, waarna ons max-widths toepas vir elk van die hoër breekpunte. Byvoorbeeld, .container-smis 100% wyd om te begin totdat die smbreekpunt bereik is, waar dit sal opskaal met md, lg, xl, en 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>

Vloeistofhouers

Gebruik .container-fluidvir 'n volle breedte houer wat oor die hele breedte van die uitsigpoort strek.

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

Sass

Soos hierbo getoon, genereer Bootstrap 'n reeks voorafbepaalde houerklasse om u te help om die uitlegte te bou wat u verlang. Jy kan hierdie vooraf gedefinieerde houerklasse pasmaak deur die Sass-kaart (gevind in _variables.scss) wat hulle aandryf, te wysig:

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

Benewens die pasmaak van die Sass, kan jy ook jou eie houers skep met ons 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();
}

Vir meer inligting en voorbeelde oor hoe om ons Sass-kaarte en veranderlikes te wysig, verwys asseblief na die Sass-afdeling van die Grid-dokumentasie .