Nā pahu pahu

Pehea lākou e hana ai

ʻO nā pahu ka mea hoʻonohonoho maʻamau ma Bootstrap a koi ʻia i ka wā e hoʻohana ai i kā mākou ʻōnaehana grid default . Hoʻohana ʻia nā pahu e hoʻopaʻa, pad, a (i kekahi manawa) e hoʻokomo i ka ʻike i loko o lākou. ʻOiai hiki ke hoʻopaʻa ʻia nā ipu, ʻaʻole pono ka hapa nui o nā hoʻolālā i kahi ipu pūnana.

Hele mai ʻo Bootstrap me ʻekolu pahu like ʻole:

• .container, ka mea e hoʻonoho i kahi max-widthma kēlā me kēia haʻihaʻi pane
• .container-{breakpoint}, ʻo ia width: 100%a hiki i ka haki i ʻōlelo ʻia
• .container-fluid, aia width: 100%ma nā wahi haʻihaʻi a pau

Hōʻike ka papa ma lalo i ke ʻano o ka hoʻohālikelike ʻana o kēlā me kēia pahu max-widthme ka mea kumu .containera .container-fluidma kēlā me kēia wahi haʻihaʻi.

E ʻike iā lākou i ka hana a hoʻohālikelike iā lākou i kā mākou Grid hiʻohiʻona .

pahu paʻamau

ʻO kā mākou papa paʻamau .containerhe pahu pane, paʻa-ākea, ʻo ia hoʻi kona mau max-widthloli i kēlā me kēia breakpoint.

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

Nā pahu pane

Hāʻawi nā pahu pane iā ʻoe e kuhikuhi i kahi papa i 100% ākea a hiki i ka breakpoint i ʻōlelo ʻia, a laila e noi mākou i max-widths no kēlā me kēia o nā breakpoints kiʻekiʻe. No ka laʻana, .container-smhe 100% ka laulā e hoʻomaka ai a hiki i ka smhaʻihaʻi, kahi e piʻi ai me md, lg, xl, a me 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>

ʻO nā pahu wai

Use .container-fluid for a full width container, spanning the entire width of the viewport.

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

Sass

As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in _variables.scss) that powers them:

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

In addition to customizing the Sass, you can also create your own containers with our 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();
}

For more information and examples on how to modify our Sass maps and variables, please refer to the Sass section of the Grid documentation.