Tirtirce Bootstrap 5 Kuduwa
Tirtirce Bootstrap 5 Grid System
Bootstrap 的网格系统是用 flexbox 构建的，页面上最多允许 12 列。
如果您不想单独使用所有 12 列，那么可以将这些列组合在一起，以创建更宽的列：
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
网格系统响应迅速，列会根据屏幕大小自动重新排列。
请确保总和等于或小于 12（如果不需要使用所有 12 个可用列）。
网格类
Bootstrap 5 网格系统有六个类：
.col-(超小型设备 - 屏幕宽度小于 576px).col-sm-(小型设备 - 屏幕宽度等于或大于 576px).col-md-(中型设备 - 屏幕宽度等于或大于 768 像素).col-lg-(大型设备 - 屏幕宽度等于或大于 992 像素).col-xl-(xlarge 设备 - 屏幕宽度等于或大于 1200px).col-xxl-(xxlarge 设备 - 屏幕宽度等于或大于 1400px)
Kuma ka ƙara kowane jiki a cikin ƙungiyar, domin ka ƙirƙira ƙungiyar mai ƙwaye da kuma ƙwaye da ke sa ido.
Tirabawa:kowane jiki ne kuma ƙaɗa ceke, kuma kuma ka so ka sm da md Donakalar ta yi kafafawa ɗaya, kuma ka ƙara ɗin sm。
Ƙungiyar ƙaɗa ta Bootstrap 5
Awa da na ƙungiyar ƙaɗa ta Bootstrap 5:
<div class="row"> </div> <div class="row"> </div> <div class="row"> </div>
第一个例子：创建一行（<div class="row">）。然后，添加所需数量的列（带有合适的 .col-*-* 类的标签）。第一颗星 (*) 代表响应度：sm、md、lg、xl 或 xxl，而第二颗星代表数字，每行加起来应为 12。
第二个例子：不是给每个 col 添加一个数字，而是让 bootstrap 处理布局，以创建等宽的列：两个 "col" 元素 = 每个 col 为 50% 宽度，而三个 cols = 每个 col 为 33.33% 宽度。四个列 = 25% 宽度，等等。您还可以使用 .col-sm|md|lg|xl|xxl 使列获得响应性。
下面我们整理了一些基本的 Bootstrap 5 网格布局的例子。
响应式列
下例显示了如何从平板电脑开始创建四个等宽的列，然后扩展到超大桌面。在宽度小于 576px 的手机或屏幕上，列会自动堆叠在一起：
Dokar
<div class="row">.col-sm-3.col-sm-3.col-sm-3.col-sm-3</div>
两个不等的响应式列
下例显示了如何在平板电脑得到两个不同宽度的列并扩展到超大型桌面：
Dokar
<div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div>
Tirabawa:A kaiyaki kaiyaki, zai iya samun Gida Na kaiyaki
