Contoh Grid Bootstrap 5
- 上一页 BS5 网格 XXL
- 下一页 BS5 基础模板
Di sini kami mengatur beberapa contoh tata letak grid Bootstrap 5.
Tiga kolom yang sama
Gunakan di jumlah elemen yang ditentukan .col Kelas, Bootstrap akan mengenali berapa banyak elemen (dan menciptakan kolom yang berukuran sama). Dalam contoh di bawah ini, kami menggunakan tiga elemen col, setiap elemen memiliki lebar 33.33%.
实例
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
Tiga kolom yang sama menggunakan angka
Anda juga dapat menggunakan angka untuk mengawasi lebar kolom. Pastikan hanya jumlahnya sama dengan atau kurang dari 12 (tidak perlu menggunakan semua 12 kolom yang tersedia):
实例
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
Tiga kolom yang berbeda
Untuk menciptakan kolom yang berukuran yang berbeda, Anda harus menggunakan angka. Contoh di bawah ini akan menciptakan pemecahan 25%/50%/25%:
实例
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
atur lebar kolom
Walau bagaimanapun, hanya atur lebar satu kolom saja dan biarkan kolom saudara mengatur ukurannya secara otomatis. Contoh di bawah ini akan menciptakan 25%/50%/25% pemecahan:
实例
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
Lebih banyak kolom yang sama
实例
<!-- dua kolom yang sama --> <div class="row"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <!-- empat kolom yang sama --> <div class="row"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <!-- enam kolom yang sama --> <div class="row"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Row Cols
Anda juga dapat menggunakan .row-cols-* Kawalan kelas harus muncul di kolom yang berdekatan (tidak peduli berapa banyak kolom):
实例
<div class="row row-cols-1"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <div class="row row-cols-2"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <div class="row row-cols-3"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
更多不等列
实例
<!-- 两个不相等的列 --> <div class="row"> <div class="col-8">1 of 2</div> <div class="col-4">2 of 2</div> </div> <!-- 四个不相等的列 --> <div class="row"> <div class="col-2">1 of 4</div> <div class="col-2">2 of 4</div> <div class="col-2">3 of 4</div> <div class="col-6">4 of 4</div> </div> <!-- 设置两列宽度 --> <div class="row"> <div class="col-4">1 of 4</div> <div class="col-6">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div>
等高
如果一列比另一列高（由于文本或 CSS 高度），其余的将跟随：
实例
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
嵌套的列
以下例子展示了如何创建两列布局，其中一列内有另外两列：
实例
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
响应类
Bootstrap 5 网格系统有五个类：
.col-(超小型设备 - 屏幕宽度小于 576px).col-sm-(小型设备 - 屏幕宽度等于或大于 576px).col-md-(中型设备 - 屏幕宽度等于或大于 768 像素).col-lg-(大型设备 - 屏幕宽度等于或大于 992 像素).col-xl-(xlarge 设备 - 屏幕宽度等于或大于 1200px).col-xxl-(xxlarge 设备 - 屏幕宽度等于或大于 1400px)
可以组合上述类以创建更动态和灵活的布局。
提示：每个类都按比例放大，因此如果您希望为 sm 和 md 设置相同的宽度，只需指定 sm。
堆叠到水平
以下例子展示了如何创建列布局，该布局最初在超小型设备上堆叠，然后在较大设备（sm、md、lg 和 xl）上变为水平布局：
实例
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</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>
Mix 和 Match
实例
<!-- 在超小型设备上 50%/50% 拆分，在大型设备上 75%/25% 拆分 --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- 在超小型、小型、中型设备上 58%/42% 拆分，在大型和超大型设备上 66.3%/33.3% 拆分 --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- 在小型设备上 25%/75% 拆分，在中型设备上 50%/50% 拆分，在大型和超大型设备上 33%/66% 拆分。在超小型设备上，会自动堆叠（100%） --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
无 gutter
如需更改列之间的间距（额外的空间），请使用任何 .g-1|2|3|4|5 类（.g-4 是默认值）。
如需完全删除装订线（gutter），请使用 .g-0：
实例
<div class="row g-0">
- 上一页 BS5 网格 XXL
- 下一页 BS5 基础模板
