Mga sudlanan

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 .

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 .