Koneteina

E faapefea ona latou galulue

O atigipusa o le elemene sili ona faʻatulagaina i Bootstrap ma e manaʻomia pe a faʻaogaina le matou faʻaogaina o le faʻaogaina . O koneteina e fa'aoga e fa'amau ai, pad, ma (o nisi taimi) fa'atotonu mea i totonu. E ui e mafai ona fa'aputuina pusa, ae o le tele o fa'atulagaga e le mana'omia ai se fa'aputuga.

Bootstrap e sau ma pusa eseese e tolu:

• .container, lea e setiina a max-widthi vaega ta'itasi tali
• .container-fluid, lea e width: 100%i'u uma lava malepe
• .container-{breakpoint}, lea width: 100%se'ia o'o i le mea e momotu ai

O le siata o lo'o i lalo o lo'o fa'aalia ai le max-widthfa'atusaina o atigipusa ta'itasi i le mea muamua .containerma .container-fluidle va'aiga ta'itasi.

Vaʻai i latou i faʻatinoga ma faʻatusatusa i latou i la matou Grid faʻataʻitaʻiga .

Pusa masani

O le matou vasega fa'aletonu .containero se atigipusa tali, fa'amau-lautele, o lona uiga o max-widthsuiga i nofoaga ta'itasi.

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

Pusa tali

O pusa tali e mafai ai e oe ona faʻamaonia se vasega e 100% lautele seʻia oʻo i le tulaga faʻamaonia, a maeʻa ona matou faʻaoga max-widths mo vaega taʻitasi maualuga. Mo se fa'ata'ita'iga, .container-sme 100% le lautele e amata ai se'ia o'o i le smva'aiga, lea o le a fa'ateleina i le md, lg, xl, ma le 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>

Pusa vai

Fa'aoga .container-fluidmo se atigipusa lautele lautele, fa'asaga i le lautele atoa o le va'aiga.

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

Sass

E pei ona faʻaalia i luga, Bootstrap faʻatupuina se faasologa o vasega atigipusa muai faʻamalamalamaina e fesoasoani ia te oe e fausia le faʻatulagaina e te manaʻo ai. E mafai ona e fa'avasegaina nei vasega fa'asinomaga pusa e ala i le suia o le fa'afanua Sass (maua i _variables.scss) e fa'amalosia ai latou:

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

I le faaopoopo atu i le faʻavasegaina o le Sass, e mafai foʻi ona e fatuina au lava koneteina ma la matou 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();
}

Mo nisi faʻamatalaga ma faʻataʻitaʻiga i le auala e sui ai a matou faʻafanua Sass ma fesuiaiga, faʻamolemole vaʻai i le vaega Sass o le Grid pepa .