Bootstrap 5 网格的基本结构
以下代码为 Bootstrap 5 网格的基本结构:
Bootstrap5 网格基本结构
第一个例子:创建一行(
)。然后, 添加需要的列( .col- - 类中设置)。 第一个星号 ( ) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 () 表示一个数字, 同一行的数字相加为 12。
第二个例子: 不在每个 col 上添加数字,让 bootstrap 自动处理布局,同一行的每个列宽度相等: 两个 "col" ,每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度,四个 "col"每个就为 25% 的宽度,以此类推。同样,你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。