Source

Sistem grid

Gunakan grid flexbox pertama mudah alih kami yang berkuasa untuk membina reka letak semua bentuk dan saiz terima kasih kepada sistem dua belas lajur, lima peringkat lalai responsif, pembolehubah dan campuran Sass serta berdozen kelas yang dipratentukan.

Bagaimana ia berfungsi

Sistem grid Bootstrap menggunakan satu siri bekas, baris dan lajur untuk menyusun atur dan menjajarkan kandungan. Ia dibina dengan flexbox dan responsif sepenuhnya. Di bawah ialah contoh dan pandangan yang mendalam tentang cara grid disatukan.

Baru atau tidak biasa dengan flexbox? Baca panduan flexbox Tricks CSS ini untuk latar belakang, istilah, garis panduan dan coretan kod.

Satu daripada tiga lajur

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Contoh di atas mencipta tiga lajur yang sama lebar pada peranti kecil, sederhana, besar dan lebih besar menggunakan kelas grid kami yang telah ditetapkan. Lajur tersebut berpusat pada halaman dengan induk .container.

Memecahkannya, berikut ialah cara ia berfungsi:

Bekas menyediakan cara untuk memusatkan dan mendatar kandungan tapak anda. Gunakan .containeruntuk lebar piksel responsif atau .container-fluiduntuk width: 100%semua port pandangan dan saiz peranti.
Baris ialah pembalut untuk lajur. Setiap lajur mempunyai mendatar padding(dipanggil longkang) untuk mengawal ruang antara mereka. Ini paddingkemudiannya dilawan pada baris dengan margin negatif. Dengan cara ini, semua kandungan dalam lajur anda dijajarkan secara visual ke bawah sebelah kiri.
Dalam susun atur grid, kandungan mesti diletakkan dalam lajur dan hanya lajur yang boleh menjadi anak langsung baris.
Terima kasih kepada flexbox, lajur grid tanpa dinyatakan widthsecara automatik akan susun atur sebagai lajur lebar yang sama. Sebagai contoh, empat kejadian .col-smsetiap satu secara automatik akan menjadi 25% lebar dari titik putus kecil dan ke atas. Lihat bahagian lajur reka letak automatik untuk lebih banyak contoh.
Kelas lajur menunjukkan bilangan lajur yang anda ingin gunakan daripada kemungkinan 12 setiap baris. Jadi, jika anda mahukan tiga lajur yang sama lebar merentas, anda boleh menggunakan .col-4.
Lajur widths ditetapkan dalam peratusan, jadi ia sentiasa cair dan bersaiz berbanding dengan elemen induknya.
Lajur mempunyai mendatar paddinguntuk membuat longkang antara lajur individu, walau bagaimanapun, anda boleh mengalih keluar margindaripada baris dan paddingdari lajur dengan .no-gutterspada .row.
Untuk menjadikan grid responsif, terdapat lima titik putus grid, satu untuk setiap titik putus responsif : semua titik putus (lebih kecil), kecil, sederhana, besar dan lebih besar.
Titik putus grid adalah berdasarkan pertanyaan media lebar minimum, bermakna ia digunakan pada satu titik putus itu dan semua yang berada di atasnya (cth, .col-sm-4digunakan pada peranti kecil, sederhana, besar dan lebih besar, tetapi bukan xstitik putus pertama).
Anda boleh menggunakan kelas grid yang dipratentukan (seperti .col-4) atau campuran Sass untuk lebih banyak penanda semantik.

Berhati-hati dengan pengehadan dan pepijat di sekeliling flexbox , seperti ketidakupayaan untuk menggunakan beberapa elemen HTML sebagai bekas fleksibel .

Pilihan grid

Walaupun Bootstrap menggunakan ems atau rems untuk menentukan kebanyakan saiz, pxs digunakan untuk titik putus grid dan lebar bekas. Ini kerana lebar port pandangan adalah dalam piksel dan tidak berubah dengan saiz fon .

Lihat cara aspek sistem grid Bootstrap berfungsi merentas berbilang peranti dengan jadual yang berguna.

	Lebih kecil <576px	Kecil ≥576px	Sederhana ≥768px	Besar ≥992px	Lebih besar ≥1200px
Lebar bekas maksimum	Tiada (auto)	540px	720px	960px	1140px
Awalan kelas	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# lajur	12
Lebar longkang	30px (15px pada setiap sisi lajur)
Nestable	ya
Susunan lajur	ya

Lajur reka letak automatik

Gunakan kelas lajur khusus titik putus untuk saiz lajur yang mudah tanpa kelas bernombor eksplisit seperti .col-sm-6.

Sama lebar

Sebagai contoh, berikut ialah dua reka letak grid yang digunakan pada setiap peranti dan port pandangan, dari xshingga xl. Tambahkan sebarang bilangan kelas tanpa unit untuk setiap titik putus yang anda perlukan dan setiap lajur akan mempunyai lebar yang sama.

1 daripada 2

2 daripada 2

1 daripada 3

2 daripada 3

3 daripada 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Lajur yang sama lebar boleh dipecahkan kepada berbilang baris, tetapi terdapat pepijat Safari flexbox yang menghalangnya daripada berfungsi tanpa eksplisit flex-basisatau border. Terdapat penyelesaian untuk versi penyemak imbas yang lebih lama, tetapi ia tidak sepatutnya diperlukan jika anda dikemas kini.

Kolum

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Menetapkan satu lebar lajur

Reka letak automatik untuk lajur grid flexbox juga bermakna anda boleh menetapkan lebar satu lajur dan mempunyai saiz lajur adik-beradik secara automatik di sekelilingnya. Anda boleh menggunakan kelas grid yang dipratentukan (seperti yang ditunjukkan di bawah), campuran grid atau lebar sebaris. Ambil perhatian bahawa lajur lain akan mengubah saiz tidak kira lebar lajur tengah.

1 daripada 3

2 daripada 3 (lebih luas)

3 daripada 3

1 daripada 3

2 daripada 3 (lebih luas)

3 daripada 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Kandungan lebar boleh ubah

Gunakan col-{breakpoint}-autokelas untuk saiz lajur berdasarkan lebar semula jadi kandungannya.

1 daripada 3

Kandungan lebar boleh ubah

3 daripada 3

1 daripada 3

Kandungan lebar boleh ubah

3 daripada 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Berbilang baris lebar sama

Buat lajur sama lebar yang menjangkau berbilang baris dengan memasukkan .w-100lajur di mana anda mahu lajur dipecahkan ke baris baharu. Jadikan rehat responsif dengan mencampurkan .w-100dengan beberapa utiliti paparan responsif .

kol

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Kelas responsif

Grid Bootstrap termasuk lima peringkat kelas yang telah ditetapkan untuk membina reka letak responsif yang kompleks. Sesuaikan saiz lajur anda pada peranti yang lebih kecil, kecil, sederhana, besar atau lebih besar mengikut cara yang anda rasa sesuai.

Semua titik putus

Untuk grid yang sama daripada peranti terkecil hingga terbesar, gunakan kelas .coldan .col-*. Tentukan kelas bernombor apabila anda memerlukan lajur bersaiz khusus; jika tidak, sila berpegang pada .col.

kol

col-8

col-4

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

Ditindan ke mendatar

Menggunakan satu set .col-sm-*kelas, anda boleh mencipta sistem grid asas yang bermula secara bertindan dan menjadi mendatar pada titik putus kecil ( sm).

col-sm-8

col-sm-4

col-sm

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Campur dan padan

Tidak mahu lajur anda hanya disusun dalam beberapa peringkat grid? Gunakan gabungan kelas yang berbeza untuk setiap peringkat mengikut keperluan. Lihat contoh di bawah untuk mendapatkan idea yang lebih baik tentang cara semuanya berfungsi.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

Penjajaran

Gunakan utiliti penjajaran flexbox untuk menjajarkan lajur secara menegak dan mendatar.

Penjajaran menegak

Satu daripada tiga lajur

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Satu daripada tiga lajur

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Penjajaran mendatar

Satu daripada dua lajur

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Tiada longkang

Parit antara lajur dalam kelas grid kami yang telah ditetapkan boleh dialihkan dengan .no-gutters. Ini mengalih keluar s negatif margindaripada .rowdan mendatar paddingdaripada semua lajur kanak-kanak segera.

Berikut ialah kod sumber untuk mencipta gaya ini. Ambil perhatian bahawa penggantian lajur diskop kepada hanya lajur anak pertama dan disasarkan melalui pemilih atribut . Walaupun ini menjana pemilih yang lebih khusus, pelapik lajur masih boleh disesuaikan lagi dengan utiliti jarak .

Perlukan reka bentuk tepi ke tepi? Gugurkan ibu bapa .containeratau .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Dalam amalan, inilah rupanya. Harap maklum bahawa anda boleh terus menggunakan ini dengan semua kelas grid pratakrif lain (termasuk lebar lajur, peringkat responsif, susunan semula dan banyak lagi).

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Pembalut lajur

Jika lebih daripada 12 lajur diletakkan dalam satu baris, setiap kumpulan lajur tambahan akan, sebagai satu unit, membalut pada baris baharu.

.col-9

.col-4
Sejak 9 + 4 = 13 > 12, div lebar 4 lajur ini akan dibalut pada baris baharu sebagai satu unit bersebelahan.

.col-6
Lajur berikutnya diteruskan di sepanjang baris baharu.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Pecah lajur

Memecahkan lajur kepada baris baharu dalam flexbox memerlukan penggodaman kecil: tambah elemen dengan mana- width: 100%mana sahaja anda mahu membungkus lajur anda ke baris baharu. Biasanya ini dicapai dengan berbilang .rows, tetapi tidak setiap kaedah pelaksanaan boleh mengambil kira ini.

.col-6 .col-sm-3

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

Anda juga boleh menggunakan rehat ini pada titik putus tertentu dengan utiliti paparan responsif kami .

.col-6 .col-sm-4

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

Menyusun semula

Memesan kelas

Gunakan .order-kelas untuk mengawal susunan visual kandungan anda. Kelas ini responsif, jadi anda boleh menetapkan ordertitik putus mengikut (cth, .order-1.order-md-2). Termasuk sokongan untuk 1melalui 12semua lima peringkat grid.

Pertama, tetapi tidak teratur

Kedua, tetapi terakhir

Ketiga, tetapi pertama

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Terdapat juga kelas responsif .order-firstdan .order-lastyang menukar orderelemen dengan menggunakan order: -1dan order: 13( order: $columns + 1), masing-masing. Kelas ini juga boleh dicampur dengan .order-*kelas bernombor mengikut keperluan.

Pertama, tetapi terakhir

Kedua, tetapi tidak teratur

Ketiga, tetapi pertama

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Mengimbangi lajur

Anda boleh mengimbangi lajur grid dalam dua cara: .offset-kelas grid responsif kami dan utiliti margin kami . Kelas grid bersaiz untuk memadankan lajur manakala margin lebih berguna untuk susun atur pantas dengan lebar offset berubah-ubah.

Kelas mengimbangi

Alihkan lajur ke kanan menggunakan .offset-md-*kelas. Kelas ini meningkatkan margin kiri lajur dengan *lajur. Sebagai contoh, .offset-md-4bergerak .col-md-4ke atas empat lajur.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Selain mengosongkan lajur pada titik putus responsif, anda mungkin perlu menetapkan semula offset. Lihat ini dalam tindakan dalam contoh grid .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

Utiliti margin

Dengan beralih ke flexbox dalam v4, anda boleh menggunakan utiliti margin seperti .mr-automemaksa lajur adik-beradik menjauhi satu sama lain.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

Bersarang

Untuk menyarangkan kandungan anda dengan grid lalai, tambahkan lajur baharu .rowdan set .col-sm-*lajur dalam .col-sm-*lajur sedia ada. Baris bersarang hendaklah mengandungi satu set lajur yang menambah sehingga 12 atau kurang (tidak diperlukan anda menggunakan kesemua 12 lajur yang tersedia).

Tahap 1: .col-sm-9

Tahap 2: .col-8 .col-sm-6

Tahap 2: .col-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Campuran Sass

Apabila menggunakan fail Sass sumber Bootstrap, anda mempunyai pilihan untuk menggunakan pembolehubah dan campuran Sass untuk membuat reka letak halaman tersuai, semantik dan responsif. Kelas grid pratakrif kami menggunakan pembolehubah dan campuran yang sama ini untuk menyediakan keseluruhan suite kelas sedia untuk digunakan untuk reka letak responsif pantas.

Pembolehubah

Pembolehubah dan peta menentukan bilangan lajur, lebar longkang dan titik pertanyaan media untuk memulakan lajur terapung. Kami menggunakan ini untuk menjana kelas grid pratakrif yang didokumenkan di atas, serta untuk campuran tersuai yang disenaraikan di bawah.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

Campuran

Campuran digunakan bersama-sama dengan pembolehubah grid untuk menjana CSS semantik untuk lajur grid individu.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Contoh penggunaan

Anda boleh mengubah suai pembolehubah kepada nilai tersuai anda sendiri, atau hanya gunakan campuran dengan nilai lalainya. Berikut ialah contoh menggunakan tetapan lalai untuk membuat reka letak dua lajur dengan jurang antara.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Kandungan utama

Kandungan sekunder

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Menyesuaikan grid

Menggunakan pembolehubah dan peta Sass grid terbina dalam kami, anda boleh menyesuaikan sepenuhnya kelas grid yang dipratentukan. Tukar bilangan peringkat, dimensi pertanyaan media dan lebar bekas—kemudian susun semula.

Lajur dan longkang

Bilangan lajur grid boleh diubah suai melalui pembolehubah Sass. $grid-columnsdigunakan untuk menjana lebar (dalam peratus) setiap lajur individu sambil $grid-gutter-widthmenetapkan lebar untuk longkang lajur.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Peringkat grid

Melangkaui lajur itu sendiri, anda juga boleh menyesuaikan bilangan peringkat grid. Jika anda mahu hanya empat peringkat grid, anda akan mengemas kini $grid-breakpointsdan $container-max-widthskepada sesuatu seperti ini:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Apabila membuat sebarang perubahan pada pembolehubah atau peta Sass, anda perlu menyimpan perubahan anda dan menyusun semula. Melakukannya akan mengeluarkan set kelas grid pratakrif baharu untuk lebar lajur, offset dan pesanan. Utiliti keterlihatan responsif juga akan dikemas kini untuk menggunakan titik putus tersuai. Pastikan untuk menetapkan nilai grid dalam px(bukan rem, em, atau %).