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