Bootstrap 中型屏幕网格
-
定义和使用
网格选项特小屏幕 小屏幕 中等屏幕 大屏幕 特大屏幕 类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl- 屏幕宽度 <576px ≥576px ≥768px ≥992px ≥1200px 在上一章中,我们介绍了一个带有小型设备类的网格示例;我们使用了两个div(列),并给了它们 25%/75% 的分配:但是在中型设备上,将设计分成 50%/50% 可能会更好。中型设备定义为屏幕宽度为768px至991px。对于中型设备,我们将使用 .col-md- * 类:现在,Bootstrap 会说:“以小尺寸查看其中包含 -sm- 的类并使用它们;以中型大小,查看其中包含 -md- 的类并使用它们。”以下示例将在小型设备上分配 25%/75%,在中型(大型和特大型)设备上分配 50%/50%;在超小型设备上,它将自动堆叠(100%):输出结果如下:col-sm-3 col-md-6col-sm-9 col-md-6注意:注确保总和等于或少于12(不需要使用所有12个可用列)。 -
仅适用中型屏幕
在下面的示例中,我们仅指定 .col-md-6 类(不带.col-sm- *);这意味着中,大型和超大型设备将拆分50%/ 50%-因为该类别会扩大;但是,对于小型和超小型设备,它将垂直堆叠(宽度为100%): -
自动布局列
在 Bootstrap 中,有一种简单的方法可以为所有设备创建等宽的列:只需从 .col-md-* 中删除数字,并且仅对指定数量的 col 元素使用 .col-md 类;Bootstrap 将识别出有多少列,并且每列将具有相同的宽度如果屏幕尺寸<768px,则这些列将水平堆叠:输出结果如下:1 of 22 of 21 of 42 of 43 of 44 of 4 -