fitoeran

Ny fomba fiasan'izy ireo

Ny kaontenera no singa fandrafetana fototra indrindra ao amin'ny Bootstrap ary ilaina rehefa mampiasa ny rafitry ny grid default . Ny kaontenera dia ampiasaina mba hitahirizana, pad, ary (indraindray) hampifantoka ny atiny ao anatiny. Na dia azo asiana akany aza ny kaontenera, ny ankamaroan'ny fandrindrana dia tsy mila kaontenera misy akany.

Bootstrap dia tonga miaraka amin'ny kaontenera telo samihafa:

• .container, izay mametraka a max-widthisaky ny toerana tapaka mamaly
• .container-fluid, izay width: 100%amin'ny toerana tapaka rehetra
• .container-{breakpoint}, izay width: 100%mandra-pahatapitry ny fotoana voafaritra

Ny tabilao etsy ambany dia mampiseho ny max-widthfampitahana ny kaontenera tsirairay amin'ny tany am-boalohany .containersy .container-fluidmanerana ny teboka tsirairay.

Jereo amin'ny hetsika izy ireo ary ampitahao amin'ny ohatra Grid .

fitoeran-javatra mahazatra

Ny .containerkilasin'ny mahazatra anay dia kaontenera mandray andraikitra, mirefy raikitra, midika izany fa ny max-widthfiovany isaky ny toerana tapaka.

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

Kaontenera mandray andraikitra

Ny kaontenera mandray andraikitra dia ahafahanao mamaritra kilasy iray izay 100% ny sakany mandra-pahatongan'ny teboka voatondro, ary avy eo dia mampihatra max-widths ho an'ny tsirairay amin'ireo teboka ambony kokoa. Ohatra, .container-smdia 100% ny sakany hanombohana mandra-pahatongan'ny smteboka tapaka, izay hampiakatra azy amin'ny md, lg, xl, ary 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>

fitoeran-drano

Ampiasao .container-fluidamin'ny fitoeran-javatra mivelatra feno, mandrakotra ny sakany manontolo amin'ny seranan-tsambo.

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

Sass

Araka ny aseho etsy ambony, ny Bootstrap dia mamorona andiana kilasy fitoeran'entana efa voafaritra mialoha mba hanampiana anao hanangana ny drafitra tianao. Azonao atao ny mampifanaraka ireo kilasy fitahirizana efa voafaritra mialoha ireo amin'ny alàlan'ny fanovana ny sarintany Sass (hita ao amin'ny _variables.scss) izay manome hery azy ireo:

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

Ho fanampin'ny fanamboarana ny Sass, azonao atao ihany koa ny mamorona fitoeranao manokana miaraka amin'ny mixin 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();
}

Raha mila fanazavana fanampiny sy ohatra momba ny fomba hanovana ny sari-tanin'i Sass sy ny fari-piadidianay dia jereo ny fizarana Sass amin'ny tahirin-kevitra Grid .