Bootstrap 特小屏幕网格
-
定义和使用
网格选项特小屏幕 小屏幕 中等屏幕 大屏幕 特大屏幕 类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl- 屏幕宽度 <576px ≥576px ≥768px ≥992px ≥1200px 假设我们有一个包含两列的简单布局;我们希望所有设备的列拆分为25%/ 75%。我们将以下类添加到我们的两列中:以下示例将所有设备(超小,小,中,大和超大)的分配比例为 25%/75%。输出结果如下:col-3col-9注意:注确保总和等于或少于12(不需要使用所有12个可用列)。对于 33.3%/66.6% 的拆分,您将使用 .col-4 和 .col-8;对于 50%/50% 的拆分,您将使用 .col-6 和 .col-6:输出结果如下:col-4col-8col-6col-6 -
自动布局列
在 Bootstrap 中,有一种简单的方法可以为所有设备创建等宽的列:只需从 .col- * 中删除数字,并且仅对指定数量的 col 元素使用 .col 类。Bootstrap 将识别出有多少列,并且每列将具有相同的宽度:输出结果如下:1 of 22 of 21 of 42 of 43 of 44 of 4 -