Bekas

Bagaimana mereka bekerja

Bekas ialah elemen susun atur paling asas dalam Bootstrap dan diperlukan apabila menggunakan sistem grid lalai kami . Bekas digunakan untuk mengandungi, meletakkan dan (kadangkala) memusatkan kandungan di dalamnya. Walaupun bekas boleh bersarang, kebanyakan reka letak tidak memerlukan bekas bersarang.

Bootstrap datang dengan tiga bekas berbeza:

• .container, yang menetapkan a max-widthpada setiap titik putus responsif
• .container-{breakpoint}, iaitu width: 100%sehingga titik putus yang ditentukan
• .container-fluid, yang berada width: 100%pada semua titik putus

Jadual di bawah menggambarkan bagaimana setiap bekas max-widthdibandingkan dengan yang asal .containerdan .container-fluidmerentasi setiap titik putus.

Lihat mereka dalam tindakan dan bandingkan mereka dalam contoh Grid kami .

Bekas lalai

Kelas lalai kami .containerialah bekas yang responsif, lebar tetap, bermakna max-widthperubahannya pada setiap titik putus.

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

Bekas responsif

Bekas responsif membolehkan anda menentukan kelas yang 100% lebar sehingga titik putus yang ditentukan dicapai, selepas itu kami menggunakan max-widths untuk setiap titik putus yang lebih tinggi. Sebagai contoh, .container-smadalah 100% lebar untuk dimulakan sehingga smtitik putus dicapai, di mana ia akan meningkat dengan md, lg, xl, dan 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>

Bekas cecair

Gunakan .container-fluiduntuk bekas lebar penuh, merentangi keseluruhan lebar port pandangan.

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

Sass

Seperti yang ditunjukkan di atas, Bootstrap menjana satu siri kelas kontena yang dipratentukan untuk membantu anda membina reka letak yang anda inginkan. Anda boleh menyesuaikan kelas kontena yang dipratentukan ini dengan mengubah suai peta Sass (terdapat dalam _variables.scss) yang memberi kuasa kepada mereka:

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

Selain menyesuaikan Sass, anda juga boleh membuat bekas anda sendiri dengan campuran 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();
}

Untuk mendapatkan maklumat lanjut dan contoh tentang cara mengubah suai peta dan pembolehubah Sass kami, sila rujuk bahagian Sass dalam dokumentasi Grid .