栅格系统

使用强大的mobile first flexbox网格来构建各种形状和大小的布局

更新于: 2023-04-30 14:28:21 查看: 817

发布于: 2021-9-8 21:37 发布者: 大米

示例 

Bootstrap的网格系统使用一系列容器、行和列来布局和对齐内容。它是用 flexbox 构建的，完全响应。下面是一个示例，并深入解释了网格系统是如何组合在一起的。
三分之一空间占位
三分之一空间占位
三分之一空间占位 
<div class="container">
            <div class="row">
              <div class="col">
                三分之一空间占位
              </div>
              <div class="col">
                三分之一空间占位
              </div>
              <div class="col">
                三分之一空间占位
              </div>
            </div>
</div>
上面的示例使用预定义的网格类在所有设备和视口中创建三个等宽列。这些列与父类 .container一起位于页面的中心。

栅格选项

Bootstrap的网格系统可以适应所有六个默认断点以及你自定义的任何断点。 六个默认网格层如下：
  • 特小 (xs)
  • 小 (sm)
  • 中等 (md)
  • 大 (lg)
  • 超大 (xl)
  • 超大型 (xxl)
如上所述，每个断点都有自己的容器、唯一的类前缀和修饰符。以下是网格如何在这些断点之间更改：
特小(xs)
<576px 		小(sm)
≥576px 		中等(md)
≥768px 		大(lg)
≥992px 		超大(xl)
≥1200px 		超大型(xxl)
≥1400px
Container 最大宽度 None (auto) 540px 720px 960px 1140px 1320px
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
列（column）数 12
沟槽宽度 1.5rem (.75rem on left and right)
自定义沟槽宽度 Yes
可嵌套性 Yes
列排序 Yes

自动布局列

利用断点特定的列类来轻松调整列大小，而不需要像 .col-sm-6 这样的显式编号类。

等宽布局

例如，这里有两个适用于从 xs 到 xxl 的设备和视区的网格布局。为每个需要的断点添加任意数量的无单元类，每个列的宽度都相同。
1 of 2
2 of 2
1 of 3
2 of 3
3 of 3 
<div class="container">
<div class="row">
<div class="col">
  1 of 2
</div>
<div class="col">
  2 of 2
</div>
</div>
<div class="row">
<div class="col">
  1 of 3
</div>
<div class="col">
  2 of 3
</div>
<div class="col">
  3 of 3
</div>
</div>
</div>

设置一列宽度

flexbox网格列的自动布局还意味着您可以设置一列的宽度，并使其周围的同级列自动调整大小。您可以使用预定义的网格类（如下所示）、网格mixin或内联宽度。请注意，无论中间列的宽度如何，其他列都将调整大小。
1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3 
<div class="container">
<div class="row">
<div class="col">
  1 of 3
</div>
<div class="col-6">
  2 of 3 (wider)
</div>
<div class="col">
  3 of 3
</div>
</div>
<div class="row">
<div class="col">
  1 of 3
</div>
<div class="col-5">
  2 of 3 (wider)
</div>
<div class="col">
  3 of 3
</div>
</div>
</div>

可变宽度的弹性空间

使用 col-{breakpoint}-auto 类根据列内容的自然宽度来调整列的大小。
1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3 
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
  1 of 3
</div>
<div class="col-md-auto">
  Variable width content
</div>
<div class="col col-lg-2">
  3 of 3
</div>
</div>
<div class="row">
<div class="col">
  1 of 3
</div>
<div class="col-md-auto">
  Variable width content
</div>
<div class="col col-lg-2">
  3 of 3
</div>
</div>
</div>

响应式布局

Bootstrap的网格包括六层预定义的类，用于构建复杂的响应式布局。在特小、小、中、大或特大设备上自定义列的大小，只要您认为合适。

所有断点

对于从最小的设备到最大的设备使用相同的网格，请使用 .col 和 .col-* 类。 需要特殊大小的列时，请指定编号的类别； 否则，请坚持使用 .col。
col
col
col
col
col-8
col-4
<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

水平堆叠

使用一组 .col-sm-* 类，您可以创建一个基本的网格系统，该系统从堆叠开始并在小断点（sm）处变为水平。
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>

混合搭配

不希望您的列只是简单地在一些网格层中堆叠?根据需要对每一层使用不同类的组合。查看下面的示例，可以更好地了解它是如何工作的。
.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>

行和列

使用响应式的 .row-cols-* 类来快速设置最好呈现内容和布局的列数。普通的 .col-* 类适用于单独的列(例如， .col-md-4)，而行列类设置在父元素的 .row 上作为快捷方式。通过 .row-cols-auto，您可以为列指定它们的自然宽度。

使用这些行列类可以快速创建基本的网格布局或卡片控件布局。
Column
Column
Column
Column
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Column
Column
Column
Column
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Column
Column
Column
Column
<div class="container">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Column
Column
Column
Column
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Column
Column
Column
Column
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
Column
Column
Column
Column
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>

嵌套 

要将内容与默认网格嵌套在一起，请在现有的 .col-sm-* 列中添加一个新的 .row 和一组 .col-sm-* 列。 嵌套行应包括一组总计不超过12个或更少的列（不需要全部使用12个可用列）。
Level 1: .col-sm-3
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6 
<div class="container">
<div class="row">
<div class="col-sm-3">
  Level 1: .col-sm-3
</div>
<div class="col-sm-9">
  <div class="row">
    <div class="col-8 col-sm-6">
      Level 2: .col-8 .col-sm-6
    </div>
    <div class="col-4 col-sm-6">
      Level 2: .col-4 .col-sm-6
    </div>
  </div>
</div>
</div>
</div>

扫描二维码，手机查看
声明：部分数据/图片来源互联网，不代表Hluse Doc.,真实性请妥善甄别。
收藏 邀请