Wadahna

Kumaha aranjeunna dianggo

Wadah mangrupikeun unsur perenah anu paling dasar dina Bootstrap sareng diperyogikeun nalika nganggo sistem grid standar kami . Wadah dipaké pikeun ngandung, pad, jeung (kadangkala) puseur eusi dina eta. Bari wadahna bisa nested, paling layouts teu merlukeun wadah nested.

Bootstrap hadir sareng tilu wadah anu béda:

• .container, nu nangtukeun hiji max-widthdi unggal breakpoint responsif
• .container-fluid, nu width: 100%dina sagala breakpoints
• .container-{breakpoint}, anu width: 100%dugi ka titik putus anu ditangtukeun

Tabél di handap ieu ngagambarkeun kumaha unggal wadahna max-widthdibandingkeun sareng anu asli .containersareng .container-fluiddina unggal breakpoint.

Tingali aranjeunna dina aksi sareng ngabandingkeunana dina conto Grid kami .

Wadah standar

Kelas standar urang .containernyaéta responsif, wadahna tetep-lebar, hartina max-widthparobahanana dina unggal breakpoint.

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

wadah responsif

wadah responsif ngidinan Anjeun pikeun nangtukeun hiji kelas anu 100% lega nepi ka breakpoint dieusian, nu satutasna urang nerapkeun max-widths pikeun tiap tina breakpoints luhur. Contona, .container-smnyaeta 100% lega pikeun ngamimitian nepi ka smbreakpoint nu geus ngahontal, dimana eta bakal skala up kalawan md, lg, xl, jeung 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>

wadah cairan

Paké .container-fluidpikeun wadahna rubak pinuh, Manjang sakabéh rubak viewport nu.

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

Sass

Sakumaha anu dipidangkeun di luhur, Bootstrap ngahasilkeun séri kelas wadah anu tos siap pikeun ngabantosan anjeun ngawangun perenah anu anjeun pikahoyong. Anjeun tiasa nyaluyukeun kelas wadah anu tos siap ieu ku ngarobih peta Sass (kapanggih dina _variables.scss) anu ngawasa aranjeunna:

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

Salian ngaluyukeun Sass, anjeun ogé tiasa nyiptakeun wadah anjeun nyalira nganggo mixin Sass kami.

// 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();
}

Kanggo inpo nu leuwih lengkep sareng conto kumaha cara ngarobih peta sareng variabel Sass kami, mangga tingal bagian Sass tina dokuméntasi Grid .