Bagaimana cara mengubah lebar sidebar di bootstrap?

Question

Gunakan grid flexbox seluler pertama kami yang kuat untuk membangun tata letak dari semua bentuk dan ukuran berkat sistem dua belas kolom, lima tingkatan responsif default, variabel dan mixin Sass, dan lusinan kelas yang telah ditentukan sebelumnya

Bagaimana itu bekerja

Sistem kisi Bootstrap menggunakan serangkaian wadah, baris, dan kolom untuk menata dan menyelaraskan konten. Itu dibangun dengan flexbox dan sepenuhnya responsif. Di bawah ini adalah contoh dan pandangan mendalam tentang bagaimana grid bersatu

Baru atau tidak terbiasa dengan flexbox?


  

    

      One of three columns
    
    
      One of three columns
    
    
      One of three columns

Contoh di atas membuat tiga kolom dengan lebar yang sama pada perangkat kecil, sedang, besar, dan ekstra besar menggunakan kelas kisi yang telah ditentukan sebelumnya. Kolom tersebut berada di tengah halaman dengan induk


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

5

Memecahnya, begini cara kerjanya

Penampung menyediakan sarana untuk memusatkan dan melapisi konten situs Anda secara horizontal. Gunakan


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

_5 untuk lebar piksel responsif atau


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

7 untuk


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

8 di semua area pandang dan ukuran perangkat

Baris adalah pembungkus kolom. Setiap kolom memiliki horizontal


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

9 (disebut selokan) untuk mengontrol ruang di antara mereka.


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

_9 ini kemudian dinetralkan pada baris dengan margin negatif. Dengan cara ini, semua konten di kolom Anda disejajarkan secara visual di sisi kiri

Dalam tata letak kisi, konten harus ditempatkan di dalam kolom dan hanya kolom yang boleh menjadi turunan langsung dari baris

Berkat flexbox, kolom kisi tanpa


  

    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3

1 yang ditentukan akan secara otomatis mengatur tata letak sebagai kolom dengan lebar yang sama. Misalnya, empat instance


  

    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3

2 masing-masing akan secara otomatis memiliki lebar 25% dari breakpoint kecil ke atas. Lihat bagian untuk lebih banyak contoh

Kelas kolom menunjukkan jumlah kolom yang ingin Anda gunakan dari kemungkinan 12 per baris. Jadi, jika Anda ingin tiga kolom dengan lebar yang sama, Anda dapat menggunakan


  

    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3

3

Kolom


  

    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3

_1 diatur dalam persentase, sehingga selalu cair dan berukuran relatif terhadap elemen induknya

Kolom memiliki


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

9 horizontal untuk membuat talang di antara masing-masing kolom, namun, Anda dapat menghapus


  

    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3

6 dari baris dan


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

9 dari kolom dengan


  

    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3

8 pada


  

    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3

9

Untuk membuat grid responsif, ada lima breakpoint grid, masing-masing satu. semua breakpoint (ekstra kecil), kecil, sedang, besar, dan ekstra besar
Breakpoint grid didasarkan pada kueri media dengan lebar minimum, yang berarti mereka berlaku untuk satu breakpoint itu dan semua yang di atasnya (mis. g. ,
```
  

    
col
    col
    col
    col
  
  
    
col-8
    col-4
  
```
_0 berlaku untuk perangkat kecil, sedang, besar, dan ekstra besar, tetapi bukan breakpoint
```
  

    
col
    col
    col
    col
  
  
    
col-8
    col-4
  
```
1 pertama)

Anda dapat menggunakan kelas kisi yang telah ditentukan sebelumnya (seperti


  

    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3

3) atau untuk markup semantik lainnya

Waspadai batasan dan bug di sekitar flexbox, seperti

Opsi kisi

Sementara Bootstrap menggunakan


  

    
col
    col
    col
    col
  
  
    
col-8
    col-4

3s atau


  

    
col
    col
    col
    col
  
  
    
col-8
    col-4

4s untuk menentukan sebagian besar ukuran,


  

    
col
    col
    col
    col
  
  
    
col-8
    col-4

5s digunakan untuk breakpoint grid dan lebar container. Ini karena lebar viewport dalam piksel dan tidak berubah dengan

Lihat bagaimana aspek sistem grid Bootstrap bekerja di beberapa perangkat dengan tabel praktis

Ekstra kecil
<576pxSmall
≥576pxMedium
≥768pxBesar
≥992pxEkstra besar
≥1200pxMax container widthNone (auto)540px720px960px1140pxClass prefix


  

    
col
    col
    col
    col
  
  
    
col-8
    col-4

6


  

    
col
    col
    col
    col
  
  
    
col-8
    col-4

7


  

    
col




    col
    col
    col
  
  
    
col-8
    col-4

8


  

    
col
    col
    col
    col
  
  
    
col-8
    col-4

9


  

    
col-sm-8
    col-sm-4
  
  
    
col-sm
    col-sm
    col-sm

0# kolom12Lebar talang30px (15px di setiap sisi kolom)NestableYesKolom pemesananYa

Kolom tata letak otomatis

Manfaatkan kelas kolom khusus breakpoint untuk ukuran kolom yang mudah tanpa kelas bernomor eksplisit seperti


  

    
col-sm-8
    col-sm-4
  
  
    
col-sm
    col-sm
    col-sm

1

Sama-lebar

Misalnya, berikut adalah dua tata letak petak yang berlaku untuk setiap perangkat dan viewport, dari


  

    
col
    col
    col
    col
  
  
    
col-8
    col-4

1 hingga


  

    
col-sm-8
    col-sm-4
  
  
    
col-sm
    col-sm
    col-sm

3. Tambahkan sejumlah kelas tanpa unit untuk setiap breakpoint yang Anda butuhkan dan setiap kolom akan memiliki lebar yang sama

Multi-baris dengan lebar yang sama

Buat kolom dengan lebar yang sama yang menjangkau beberapa baris dengan menyisipkan


  

    
col-sm-8
    col-sm-4
  
  
    
col-sm
    col-sm
    col-sm

4 di mana Anda ingin kolom dipecah menjadi baris baru. Jadikan jeda responsif dengan menggabungkan


  

    
col-sm-8
    col-sm-4
  
  
    
col-sm
    col-sm
    col-sm

_4 dengan beberapa utilitas tampilan responsif

Ada yang mencegah ini bekerja tanpa


  

    
col-sm-8
    col-sm-4
  
  
    
col-sm
    col-sm
    col-sm

6 atau


  

    
col-sm-8
    col-sm-4
  
  
    
col-sm
    col-sm
    col-sm

7 eksplisit. Ada beberapa solusi untuk versi browser yang lebih lama, tetapi seharusnya tidak diperlukan jika browser target Anda tidak termasuk dalam versi buggy


  

    
col
    col
    
    col
    col

Mengatur lebar satu kolom

Tata letak otomatis untuk kolom grid flexbox juga berarti Anda dapat mengatur lebar satu kolom dan mengubah ukuran kolom saudara secara otomatis di sekitarnya. Anda dapat menggunakan kelas kisi yang telah ditentukan sebelumnya (seperti yang ditunjukkan di bawah), mixin kisi, atau lebar sebaris. Perhatikan bahwa kolom lain akan mengubah ukuran terlepas dari lebar kolom tengah


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

_

Konten lebar variabel

Gunakan kelas


  

    
col-sm-8
    col-sm-4
  
  
    
col-sm
    col-sm
    col-sm

_8 untuk mengatur ukuran kolom berdasarkan lebar alami kontennya


  

    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3

Kelas responsif

Kisi Bootstrap mencakup lima tingkatan kelas standar untuk membangun tata letak responsif yang kompleks. Sesuaikan ukuran kolom Anda pada perangkat ekstra kecil, kecil, sedang, besar, atau ekstra besar sesuai keinginan Anda

Semua breakpoint

Untuk kisi yang sama dari perangkat terkecil hingga terbesar, gunakan kelas


  

    
col-sm-8
    col-sm-4
  
  
    
col-sm
    col-sm
    col-sm

9 dan


  
  

    
.col-md-8
    .col-6 .col-md-4
  

  
  
    
.col-6 .col-md-4
    .col-6 .col-md-4
    .col-6 .col-md-4
  

  
  
    
.col-6
    .col-6

0. Tentukan kelas bernomor saat Anda membutuhkan kolom berukuran khusus;


  

    
col
    col
    col
    col
  
  
    
col-8
    col-4

Ditumpuk menjadi horizontal

Dengan menggunakan satu set kelas


  
  

    
.col-md-8
    .col-6 .col-md-4
  

  
  
    
.col-6 .col-md-4
    .col-6 .col-md-4
    .col-6 .col-md-4
  

  
  
    
.col-6
    .col-6

_2, Anda dapat membuat sistem grid dasar yang mulai bertumpuk dan menjadi horizontal pada breakpoint kecil (


  
  

    
.col-md-8
    .col-6 .col-md-4
  

  
  
    
.col-6 .col-md-4
    .col-6 .col-md-4
    .col-6 .col-md-4
  

  
  
    
.col-6
    .col-6

3)


  

    
col-sm-8
    col-sm-4
  
  
    
col-sm
    col-sm
    col-sm

Campur dan cocokkan

Tidak ingin kolom Anda menumpuk di beberapa tingkatan kisi? . Lihat contoh di bawah untuk ide yang lebih baik tentang cara kerjanya


  
  

    
.col-md-8
    .col-6 .col-md-4
  

  
  
    
.col-6 .col-md-4
    .col-6 .col-md-4
    .col-6 .col-md-4
  

  
  
    
.col-6
    .col-6

Talang

Talang dapat disesuaikan secara responsif dengan padding khusus breakpoint dan kelas utilitas margin negatif. Untuk mengubah selokan pada baris tertentu, pasangkan utilitas margin negatif pada


  

    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3

9 dan utilitas padding yang cocok pada


  

    
col-sm-8
    col-sm-4
  
  
    
col-sm
    col-sm




    col-sm

9s. Induk


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

5 atau


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

7 mungkin perlu disesuaikan juga untuk menghindari luapan yang tidak diinginkan, menggunakan utilitas padding yang cocok lagi

Berikut adalah contoh menyesuaikan grid Bootstrap pada breakpoint besar (


  
  

    
.col-md-8
    .col-6 .col-md-4
  

  
  
    
.col-6 .col-md-4
    .col-6 .col-md-4
    .col-6 .col-md-4
  

  
  
    
.col-6
    .col-6

8) dan di atasnya. Kami telah meningkatkan padding


  

    
col-sm-8
    col-sm-4
  
  
    
col-sm
    col-sm
    col-sm

_9 dengan


  

    
Custom column padding
    Custom column padding

0, mengimbanginya dengan


  

    
Custom column padding
    Custom column padding

1 pada induk


  

    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3

9 dan kemudian menyesuaikan pembungkus


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

5 dengan


  

    
Custom column padding
    Custom column padding

0


  

    
Custom column padding
    Custom column padding

Kolom baris

Gunakan kelas


  

    
Custom column padding
    Custom column padding

_5 yang responsif untuk mengatur dengan cepat jumlah kolom yang paling baik merender konten dan tata letak Anda. Sedangkan kelas


  
  

    
.col-md-8
    .col-6 .col-md-4
  

  
  
    
.col-6 .col-md-4
    .col-6 .col-md-4
    .col-6 .col-md-4
  

  
  
    
.col-6
    .col-6

0 normal berlaku untuk masing-masing kolom (mis. g. ,


  

    
Custom column padding
    Custom column padding

_7), kelas kolom baris ditetapkan pada induk


  

    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3

9 sebagai jalan pintas

Gunakan kelas kolom baris ini untuk membuat tata letak kisi dasar dengan cepat atau untuk mengontrol tata letak kartu Anda


  

    
Column
    Column
    Column
    Column

0

1

2

3

Anda juga dapat menggunakan mixin Sass yang menyertainya,


  

    
Custom column padding
    Custom column padding

9

4

Penyelarasan

Gunakan utilitas perataan flexbox untuk menyelaraskan kolom secara vertikal dan horizontal. Internet Explorer 10-11 tidak mendukung perataan vertikal item fleksibel saat wadah fleksibel memiliki


  

    
Column
    Column
    Column
    Column

0 seperti yang ditunjukkan di bawah ini.

Penjajaran vertikal

5

6

Penjajaran horizontal

7

Tidak ada selokan

Talang antara kolom di kelas kisi yang telah ditentukan sebelumnya dapat dihapus dengan


  

    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3

8. Ini menghapus


  

    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3

6s negatif dari


  

    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3

9 dan


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

9 horizontal dari semua kolom turunan langsung

Berikut kode sumber untuk membuat gaya ini. Perhatikan bahwa penggantian kolom hanya dicakup ke kolom turunan pertama dan ditargetkan melalui pemilih atribut. Meskipun ini menghasilkan pemilih yang lebih spesifik, bantalan kolom masih dapat disesuaikan lebih lanjut dengan utilitas penspasian

Butuh desain tepi-ke-tepi?

8

Dalam praktiknya, inilah tampilannya. Perhatikan bahwa Anda dapat terus menggunakan ini dengan semua kelas kisi yang telah ditentukan sebelumnya (termasuk lebar kolom, tingkatan responsif, penyusunan ulang, dan lainnya)

_9

Pembungkus kolom

Jika lebih dari 12 kolom ditempatkan dalam satu baris, setiap kelompok kolom tambahan akan, sebagai satu unit, membungkus ke baris baru

kol-4
Karena 9 + 4 = 13 > 12, div selebar 4 kolom ini dibungkus ke baris baru sebagai satu unit yang berdekatan

kol-6
Kolom berikutnya berlanjut di sepanjang baris baru


  

    
col
    col
    
    col
    col

_0

Istirahat kolom

Memecah kolom ke baris baru di flexbox membutuhkan retasan kecil. tambahkan elemen dengan


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

_8 di mana pun Anda ingin membungkus kolom Anda ke baris baru. Biasanya ini dilakukan dengan beberapa


  

    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3

_9, tetapi tidak setiap metode implementasi dapat menjelaskan hal ini


  

    
col
    col
    
    col
    col

_1

Anda juga dapat menerapkan jeda ini pada breakpoint tertentu dengan utilitas tampilan responsif kami


  

    
col
    col
    
    col
    col

_2

Menyusun ulang

Memesan kelas

Gunakan kelas


  

    
Column
    Column
    Column
    Column

_9 untuk mengontrol urutan visual konten Anda. Kelas-kelas ini responsif, sehingga Anda dapat menyetel

00 dengan breakpoint (e. g. ,

_01). Mencakup dukungan untuk

02 hingga

03 di kelima tingkatan jaringan

Pertama di DOM, tidak ada urutan yang diterapkan

Kedua di DOM, dengan urutan yang lebih besar

Ketiga di DOM, dengan urutan 1


  

    
col
    col
    
    col
    col

_3

Ada juga kelas

04 dan

05 responsif yang mengubah

00 elemen dengan menerapkan

07 dan

08 (

09), masing-masing. Kelas-kelas ini juga dapat dicampur dengan kelas

10 bernomor sesuai kebutuhan

Pertama di DOM, dipesan terakhir

Ketiga di DOM, diurutkan terlebih dahulu


  

    
col
    col
    
    col
    col

_4

Mengimbangi kolom

Anda dapat mengimbangi kolom kisi dengan dua cara. kelas grid

_11 responsif kami dan utilitas margin kami. Kelas kisi disesuaikan ukurannya dengan kolom sementara margin lebih berguna untuk tata letak cepat di mana lebar offset bervariasi

kelas offset

Pindahkan kolom ke kanan menggunakan

_12 kelas. Kelas-kelas ini menambah margin kiri kolom sebanyak

13 kolom. Misalnya,

_14 memindahkan


  

    
Custom column padding
    Custom column padding

7 ke empat kolom


  

    
col
    col
    
    col
    col

_5

Selain pembersihan kolom pada breakpoint responsif, Anda mungkin perlu menyetel ulang offset. Lihat ini beraksi di contoh kisi

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


  

    
col
    col
    
    col
    col

_6

Utilitas margin

Dengan pindah ke flexbox di v4, Anda dapat menggunakan utilitas margin seperti

16 untuk memaksa kolom saudara menjauh satu sama lain


  

    
col
    col
    
    col
    col

_7

Bersarang

Untuk menyusun konten Anda dengan kisi default, tambahkan


  

    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      Variable width content
    
    
      3 of 3

9 baru dan kumpulan


  
  

    
.col-md-8
    .col-6 .col-md-4
  

  
  
    
.col-6 .col-md-4
    .col-6 .col-md-4
    .col-6 .col-md-4
  

  
  
    
.col-6
    .col-6

2 kolom dalam kolom


  
  

    
.col-md-8
    .col-6 .col-md-4
  

  
  
    
.col-6 .col-md-4
    .col-6 .col-md-4
    .col-6 .col-md-4
  

  
  
    
.col-6
    .col-6

2 yang sudah ada. Baris bersarang harus menyertakan kumpulan kolom yang berjumlah hingga 12 atau kurang (Anda tidak diharuskan menggunakan semua 12 kolom yang tersedia)

Tingkat 1. . col-sm-9

Level 2. . kol-8. col-sm-6

Level 2. . kol-4. col-sm-6


  

    
col
    col
    
    col
    col

_8

Sass mixin

Saat menggunakan file Sass sumber Bootstrap, Anda memiliki opsi untuk menggunakan variabel dan mixin Sass untuk membuat tata letak halaman khusus, semantik, dan responsif. Kelas grid standar kami menggunakan variabel dan mixin yang sama ini untuk menyediakan seluruh rangkaian kelas siap pakai untuk tata letak responsif cepat

Variabel

Variabel dan peta menentukan jumlah kolom, lebar selokan, dan titik kueri media untuk memulai kolom mengambang. Kami menggunakan ini untuk menghasilkan kelas grid standar yang didokumentasikan di atas, serta untuk mixin kustom yang tercantum di bawah


  

    
col
    col
    
    col
    col

_9

Mixin

Mixin digunakan bersama dengan variabel grid untuk menghasilkan CSS semantik untuk masing-masing kolom grid


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

_0

Contoh penggunaan

Anda dapat memodifikasi variabel ke nilai kustom Anda sendiri, atau hanya menggunakan mixin dengan nilai defaultnya. Berikut adalah contoh penggunaan pengaturan default untuk membuat tata letak dua kolom dengan celah di antaranya


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

1


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

2

Menyesuaikan kisi

Dengan menggunakan variabel dan peta grid Sass built-in kami, dimungkinkan untuk sepenuhnya menyesuaikan kelas grid yang telah ditentukan sebelumnya. Ubah jumlah tingkatan, dimensi kueri media, dan lebar penampung—lalu kompilasi ulang

Kolom dan talang

Jumlah kolom grid dapat dimodifikasi melalui variabel Sass.

20 digunakan untuk menghasilkan lebar (dalam persen) dari setiap kolom individu sementara

21 mengatur lebar talang kolom


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

_3

Tingkatan kisi

Bergerak di luar kolom itu sendiri, Anda juga dapat menyesuaikan jumlah tingkatan kisi. Jika Anda hanya menginginkan empat tingkatan kisi, Anda akan memperbarui

22 dan

23 menjadi seperti ini


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

_4

Saat membuat perubahan apa pun pada variabel atau peta Sass, Anda harus menyimpan perubahan dan mengkompilasi ulang. Melakukan hal itu akan menampilkan serangkaian kelas kisi yang telah ditentukan sebelumnya untuk lebar kolom, offset, dan pemesanan. Utilitas visibilitas responsif juga akan diperbarui untuk menggunakan breakpoint khusus. Pastikan untuk mengatur nilai kisi di


  

    
col
    col
    col
    col
  
  
    
col-8
    col-4

5 (bukan


  

    
col
    col
    col
    col
  
  
    
col-8
    col-4

4,


  

    
col
    col
    col
    col
  
  
    
col-8
    col-4

3, atau

27)

Untuk mengimplementasikan sidebar lebar tetap pada Bootstrap, kita perlu membuat 2 gaya grid CSS baru. col-fluid dan col-fixed . Kedua kelas grid ini akan digunakan sebagai pengganti kelas col-* default Bootstrap. col-fixed akan digunakan untuk sidebar dan col-fluid akan digunakan untuk konten utama.

Lebar dan Tinggi Sidebar . A width between 20% and 40% is usually the best choice for a single sidebar and if you're going to use more than one sidebar, I suggest you don't exceed a total width of 50% (20% + 20% and 15% + 35%, for example).

Anda dapat membuat tata letak kanan 3 kolom dengan menambahkan. kelas content-right-sidebar di tag . Dalam tata letak ini konten harus mengapung di sisi kanan, jadi. kelas konten-kiri perlu menambahkan pembungkus konten.

kode bootstrap