Laktawan sa panguna nga sulud Laktaw sa docs navigation
Check
in English

Mga sudlanan

Ang mga sudlanan usa ka sukaranan nga bloke sa pagtukod sa Bootstrap nga adunay sulud, pad, ug align sa imong sulud sulod sa gihatag nga aparato o viewport.

Giunsa nila pagtrabaho

Ang mga sudlanan mao ang labing sukaranan nga elemento sa layout sa Bootstrap ug gikinahanglan kung gamiton ang among default nga grid system . Ang mga sudlanan gigamit sa pagtago, pad, ug (usahay) isentro ang sulud sa sulod niini. Samtang ang mga sudlanan mahimong magsalag, kadaghanan sa mga layout wala magkinahanglan usa ka salag nga sudlanan.

Ang Bootstrap adunay tulo ka lainlaing mga sudlanan:

  • .container, nga nagtakda ug max-widthsa matag responsive breakpoint
  • .container-{breakpoint}, nga width: 100%hangtod sa gitakda nga breakpoint
  • .container-fluid, nga anaa width: 100%sa tanang breakpoints

Ang lamesa sa ubos naghulagway kung giunsa pagtandi ang matag sudlanan max-widthsa orihinal .containerug .container-fluidsa matag breakpoint.

Tan-awa sila sa aksyon ug itandi sila sa among Grid nga ehemplo .

Dugang gamay
<576px
Gamay
≥576px
Medium
≥768px
Dako
≥992px
X-Daghan
≥1200px
XX-Dagko
≥1400px
.container 100% 540px 720px 960px 1140 px 1320px
.container-sm 100% 540px 720px 960px 1140 px 1320px
.container-md 100% 100% 720px 960px 1140 px 1320px
.container-lg 100% 100% 100% 960px 1140 px 1320px
.container-xl 100% 100% 100% 100% 1140 px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%

Default nga sudlanan

Ang among default .containernga klase usa ka responsive, fixed-width nga sudlanan, nagpasabut nga ang mga max-widthpagbag-o niini sa matag breakpoint.

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

Responsive nga mga sudlanan

Ang mga responsive nga mga sudlanan nagtugot kanimo sa pagpiho sa usa ka klase nga 100% ang gilapdon hangtod maabot ang espesipikong breakpoint, nga human niini atong i-apply max-widthang s alang sa matag usa sa mas taas nga breakpoints. Pananglitan, .container-sm100% ang gilapdon nga magsugod hangtod smmaabot ang breakpoint, diin kini mosaka sa md, lg, xl, ug 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>

Mga sudlanan sa likido

Gamit .container-fluidalang sa usa ka bug-os nga gilapdon nga sudlanan, nga nagsangkad sa tibuuk nga gilapdon sa viewport.

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

Sass

Sama sa gipakita sa ibabaw, ang Bootstrap nagmugna og usa ka serye sa mga predefined nga mga klase sa sudlanan aron matabangan ka sa paghimo sa mga layout nga imong gusto. Mahimo nimong ipasibo kining gitakda nang daan nga mga klase sa sudlanan pinaagi sa pag-usab sa mapa sa Sass (makita sa _variables.scss) ​​nga nagpalihok kanila:

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

Dugang sa pag-customize sa Sass, mahimo ka usab nga maghimo sa imong kaugalingon nga mga sudlanan gamit ang among 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();
}

Para sa dugang nga impormasyon ug mga pananglitan kon unsaon pag-usab sa atong Sass nga mga mapa ug mga variable, palihog tan-awa ang Sass nga seksyon sa Grid nga dokumentasyon .