Bootstrap/docs/4.5/layout/grid
网格系统
借助十二列系统,五个默认响应层,Sass变量和混合以及数十个预定义类,使用我们强大的移动优先Flexbox网格来构建所有形状和大小的布局。
这个怎么运作
Bootstrap的网格系统使用一系列容器,行和列来布局和对齐内容。 它内置 弹性盒 并且反应灵敏。 下面是一个示例,并深入研究了网格如何组合在一起。
新手还是不熟悉flexbox？ 阅读此CSS Tricks flexbox指南 有关背景,术语,指南和代码段的信息。
<div class="container">
<div class="row">
<div class="col-sm"> 三列之一 </div>
<div class="col-sm"> 三列之一 </div>
<div class="col-sm"> 三列之一 </div>
</div>
</div>上面的示例使用预定义的网格类在小型,中型,大型和超大型设备上创建了三个等宽列。 这些列位于父页面的中心 .container.
分解一下,它是这样工作的：
- 容器提供了一种使您的网站内容居中和水平填充的方法。 Use
.container对于响应像素宽度或.container-fluidforwidth: 100%所有视口和设备尺寸。 - 行是列的包装。 每列有水平
padding（称为装订线）以控制它们之间的空间。 Thispadding然后在具有负边距的行上抵消。 这样,列中的所有内容在视觉上都在左侧向下对齐。 - 在网格布局中,必须将内容放置在列内,并且只有列可以是行的直接子代。
- 多亏了flexbox,没有指定网格的列
width将自动按等宽列布局。 例如,四个实例.col-sm会自动从小断点开始向上增加25％的宽度。 见 自动布局列 部分以获取更多示例。 - 列类别表示您希望在每行最多12列中使用的列数。 因此,如果要跨三个相等宽度的列,则可以使用
.col-4. - 柱
width设置为百分比,因此相对于其父元素而言,它们始终是可变的且大小合适。 - 列有水平
padding在各个列之间创建装订线,但是,您可以删除margin从行和padding从列.no-gutters在...上.row. - 为了使网格响应,有五个网格断点,每个断点一个 响应断点 ：所有断点（超小）,小,中,大和特大。
- 网格断点基于最小宽度的媒体查询,这意味着 它们适用于该一个断点及其上方的所有断点 （例如。,
.col-sm-4适用于小型,中型,大型和超大型设备,但不适用于第一个xs断点）。 - 您可以使用预定义的网格类（例如
.col-4) or 无礼的混蛋 以获得更多的语义标记。
注意局限性和 Flexbox周围的错误 , 如 无法将某些HTML元素用作Flex容器 .
网格选项
虽然Bootstrap使用 em s or rem 用于定义大多数尺寸, px s用于网格断点和容器宽度。 这是因为视口宽度以像素为单位,并且不会随 字体大小 .
借助便捷的表格,了解Bootstrap网格系统在多个设备上如何工作。
特小
<576px
小
≥576像素
介质
≥768像素
大
≥992像素
超大
≥1200像素
最大容器宽度
无（自动）
540像素
720px
960px
1140px
类前缀
.col-
.col-sm-
.col-md-
.col-lg-
.col-xl-
列数
12
天沟宽度
30像素（每列15像素）
可嵌套
Yes
列顺序
Yes
自动布局列
利用特定于断点的列类可轻松进行列大小调整,而无需像 .col-sm-6.
等宽
例如,以下是两个网格布局,它们适用于每个设备和视口,从 xs to xl 。为所需的每个断点添加任意数量的无单元类,每列的宽度相同。
<div class="container">
<div class="row">
<div class="col"> 1的2 </div>
<div class="col"> 2之2 </div>
</div>
<div class="row">
<div class="col"> 1之3 </div>
<div class="col"> 2之3 </div>
<div class="col"> 3之3 </div>
</div>
</div>等宽多行
通过插入一个 .w-100 您希望列中断到新行的位置。 通过混合使休息更灵敏 .w-100 跟一些 响应式显示实用程序 .
有一个 Safari Flexbox错误 阻止了它的工作而没有明确的 flex-basis or border 。对于较旧的浏览器版本,有一些解决方法,但是如果您的目标浏览器不属于多虫的版本,则不必这样做。
<div class="container">
<div class="row">
<div class="col"> col </div>
<div class="col"> col </div>
<div class="w-100"></div>
<div class="col"> col </div>
<div class="col"> col </div>
</div>
</div>设置一列宽度
Flexbox网格列的自动布局还意味着您可以设置一列的宽度,并使同级列自动调整其大小。 您可以使用预定义的网格类（如下所示）,网格混合或内联宽度。 请注意,无论中间列的宽度如何,其他列都会调整大小。
<div class="container">
<div class="row">
<div class="col"> 1之3 </div>
<div class="col-6"> 2之3（较宽） </div>
<div class="col"> 3之3 </div>
</div>
<div class="row">
<div class="col"> 1之3 </div>
<div class="col-5"> 2之3（较宽） </div>
<div class="col"> 3之3 </div>
</div>
</div>可变宽度内容
Use col-{breakpoint}-auto 类可根据其内容的自然宽度来调整列的大小。
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2"> 1之3 </div>
<div class="col-md-auto"> 可变宽度内容 </div>
<div class="col col-lg-2"> 3之3 </div>
</div>
<div class="row">
<div class="col"> 1之3 </div>
<div class="col-md-auto"> 可变宽度内容 </div>
<div class="col col-lg-2"> 3之3 </div>
</div>
</div>回应式课程
Bootstrap的网格包括五层预定义的类,用于构建复杂的响应式布局。 在您认为合适的情况下,在超小型,小型,中型,大型或超大型设备上自定义列的大小。
所有断点
对于从最小的设备到最大的设备相同的网格,请使用 .col and .col-* 类。 需要特殊大小的列时,请指定编号的类别；否则,请坚持 .col.
<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"> 第8列 </div>
<div class="col-4"> 第4列 </div>
</div>
</div>堆叠到水平
使用一组 .col-sm-* 类,您可以创建一个基本的网格系统,该系统从堆叠开始并在较小的断点处变为水平（ 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"> 山姆 </div>
<div class="col-sm"> 山姆 </div>
<div class="col-sm"> 山姆 </div>
</div>
</div>连连看
不想让您的列简单地堆叠在某些网格层中吗？ 根据需要为每个层使用不同类的组合。 请参阅下面的示例,以更好地了解所有工作原理。
<div class="container">
通过使一个全角和另一个半角堆叠在移动设备上的列
<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>
在移动设备上,列的起始宽度为50％,在台式机上,列的宽度最高为33.3％
<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>
在移动设备和台式机上,列的宽度始终为50％
<div class="row">
<div class="col-6"> .col-6 </div>
<div class="col-6"> .col-6 </div>
</div>
</div>天沟
可以通过特定于断点的填充和负余量实用程序类来快速调整装订线。 要更改给定行中的装订线,请在 .row 和匹配的填充实用程序 .col s. The .container or .container-fluid 可能还需要使用再次匹配的padding实用程序来调整parent以避免不必要的溢出。
这是自定义大型Bootstrap网格的示例（ lg ）断点及以上。 我们增加了 .col 填充 .px-lg-5 ,与 .mx-lg-n5 在父母身上 .row 然后调整 .container 包装用 .px-lg-5.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light"> 自定义列填充 </div>
<div class="col py-3 px-lg-5 border bg-light"> 自定义列填充 </div>
</div>
</div>行列
使用响应式 .row-cols-* 类,以快速设置最能呈现您的内容和布局的列数。 而正常 .col-* 类适用于各个列（例如, .col-md-4 ）,则在父级上设置行列类 .row 作为捷径。
使用这些行列类可以快速创建基本的网格布局或控制您的卡片布局。
<div class="container">
<div class="row row-cols-2">
<div class="col"> 柱 </div>
<div class="col"> 柱 </div>
<div class="col"> 柱 </div>
<div class="col"> 柱 </div>
</div>
</div><div class="container">
<div class="row row-cols-3">
<div class="col"> 柱 </div>
<div class="col"> 柱 </div>
<div class="col"> 柱 </div>
<div class="col"> 柱 </div>
</div>
</div><div class="container">
<div class="row row-cols-4">
<div class="col"> 柱 </div>
<div class="col"> 柱 </div>
<div class="col"> 柱 </div>
<div class="col"> 柱 </div>
</div>
</div><div class="container">
<div class="row row-cols-4">
<div class="col"> 柱 </div>
<div class="col"> 柱 </div>
<div class="col-6"> 柱 </div>
<div class="col"> 柱 </div>
</div>
</div><div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col"> 柱 </div>
<div class="col"> 柱 </div>
<div class="col"> 柱 </div>
<div class="col"> 柱 </div>
</div>
</div>您也可以使用随附的Sass mixin, row-cols():
对准
使用flexbox对齐工具可垂直和水平对齐列。 当flex容器中有一个flex容器时,Internet Explorer 10-11不支持flex项的垂直对齐。 min-height 如下所示。 有关更多详细信息,请参见Flexbugs#3。
垂直对齐
<div class="container">
<div class="row align-items-start">
<div class="col"> 三列之一 </div>
<div class="col"> 三列之一 </div>
<div class="col"> 三列之一 </div>
</div>
<div class="row align-items-center">
<div class="col"> 三列之一 </div>
<div class="col"> 三列之一 </div>
<div class="col"> 三列之一 </div>
</div>
<div class="row align-items-end">
<div class="col"> 三列之一 </div>
<div class="col"> 三列之一 </div>
<div class="col"> 三列之一 </div>
</div>
</div><div class="container">
<div class="row">
<div class="col align-self-start"> 三列之一 </div>
<div class="col align-self-center"> 三列之一 </div>
<div class="col align-self-end"> 三列之一 </div>
</div>
</div>水平对齐
<div class="container">
<div class="row justify-content-start">
<div class="col-4"> 两列之一 </div>
<div class="col-4"> 两列之一 </div>
</div>
<div class="row justify-content-center">
<div class="col-4"> 两列之一 </div>
<div class="col-4"> 两列之一 </div>
</div>
<div class="row justify-content-end">
<div class="col-4"> 两列之一 </div>
<div class="col-4"> 两列之一 </div>
</div>
<div class="row justify-content-around">
<div class="col-4"> 两列之一 </div>
<div class="col-4"> 两列之一 </div>
</div>
<div class="row justify-content-between">
<div class="col-4"> 两列之一 </div>
<div class="col-4"> 两列之一 </div>
</div>
</div>没有排水沟
可以使用以下方法删除预定义网格类别中列之间的装订线 .no-gutters 。这消除了负面影响 margin 来自的 .row 和水平 padding 从所有直接子级列中。
这是用于创建这些样式的源代码。 请注意,列替代的作用域仅限于第一个子列,并且通过 属性选择器 。尽管这会生成更具体的选择器,但仍可以使用以下方法进一步自定义列填充 间隔实用程序 .
需要边缘到边缘的设计吗？ 放下父母 .container or .container-fluid.
实际上,这是它的外观。 请注意,您可以继续将其与所有其他预定义的网格类（包括列宽,响应层,重新排序等）一起使用。
<div class="row no-gutters">
<div class="col-sm-6 col-md-8"> .col-sm-6 .col-md-8 </div>
<div class="col-6 col-md-4"> .col-6 .col-md-4 </div>
</div>列包装
如果在一行中放置超过12列,则每组额外的列将作为一个单元包装到新行上。
由于9 + 4 = 13> 12,因此该4列宽的div以一个连续单位的形式换行。
随后的列沿新行继续。
<div class="container">
<div class="row">
<div class="col-9"> .col-9 </div>
<div class="col-4"> .col-4 <br/> 由于9 + 4 = 13> 12,因此该4列宽的div以一个连续单位的形式换行。 </div>
<div class="col-6"> .col-6 <br/> 随后的列沿新行继续。 </div>
</div>
</div>分栏符
在flexbox中将列拆分为新行需要一个小技巧：使用 width: 100% 无论您希望将列换行到新行。 通常这是通过多个 .row s,但并非每种实现方法都可以解决这个问题。
<div class="container">
<div class="row">
<div class="col-6 col-sm-3"> .col-6 .col-sm-3 </div>
<div class="col-6 col-sm-3"> .col-6 .col-sm-3 </div>
强制下一列换行
<div class="w-100"></div>
<div class="col-6 col-sm-3"> .col-6 .col-sm-3 </div>
<div class="col-6 col-sm-3"> .col-6 .col-sm-3 </div>
</div>
</div>您还可以通过我们的特定断点应用此中断 响应式显示实用程序 .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4"> .col-6 .col-sm-4 </div>
<div class="col-6 col-sm-4"> .col-6 .col-sm-4 </div>
强制下一列在md断点处向上移动到新行
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4"> .col-6 .col-sm-4 </div>
<div class="col-6 col-sm-4"> .col-6 .col-sm-4 </div>
</div>
</div>重新排序
订单类别
Use .order- 用于控制 视觉秩序 您的内容。 这些类是响应式的,因此您可以设置 order 按断点（例如, .order-1.order-md-2 ). 包括对 1 通过 12 跨越所有五个网格层。
<div class="container">
<div class="row">
<div class="col"> DOM中的第一个,不应用任何顺序 </div>
<div class="col order-12"> DOM中的第二大顺序 </div>
<div class="col order-1"> 在DOM中排名第三,顺序为1 </div>
</div>
</div>也有回应 .order-first and .order-last 改变 order 通过应用元素 order: -1 and order: 13(order: $columns + 1 ）, 分别。 这些类别也可以与编号混合 .order-* 根据需要的类。
<div class="container">
<div class="row">
<div class="col order-last"> DOM中的第一名,最后一位 </div>
<div class="col"> 在DOM中排名第二,无序 </div>
<div class="col order-first"> DOM中的第三名,第一名 </div>
</div>
</div>抵消列
您可以通过两种方式抵消网格列：我们的响应式 .offset- 网格类和我们的 保证金工具 。网格类的大小可匹配列,而边距对于偏移宽度可变的快速布局更有用。
偏移类
使用将列向右移动 .offset-md-* 类。 这些类将列的左边距增加 * 列。 例如, .offset-md-4 动作 .col-md-4 超过四列。
<div class="container">
<div class="row">
<div class="col-md-4"> .col-md-4 </div>
<div class="col-md-4 offset-md-4"> .col-md-4 .offset-md-4 </div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3"> .col-md-3 .offset-md-3 </div>
<div class="col-md-3 offset-md-3"> .col-md-3 .offset-md-3 </div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3"> .col-md-6 .offset-md-3 </div>
</div>
</div>除了在响应断点处清除列外,您可能还需要重置偏移量。 看到这个在行动 网格示例 .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6"> .col-sm-5 .col-md-6 </div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0"> .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0 </div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6"> .col-sm-6 .col-md-5 .col-lg-6 </div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0"> .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0 </div>
</div>
</div>保证金工具
随着在v4中移至flexbox,您可以使用诸如 .mr-auto 迫使同级列彼此远离。
<div class="container">
<div class="row">
<div class="col-md-4"> .col-md-4 </div>
<div class="col-md-4 ml-auto"> .col-md-4 .ml-自动 </div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto"> .col-md-3 .ml-md-auto </div>
<div class="col-md-3 ml-md-auto"> .col-md-3 .ml-md-auto </div>
</div>
<div class="row">
<div class="col-auto mr-auto"> .col-auto .mr-auto </div>
<div class="col-auto"> .col-自动 </div>
</div>
</div>套料
要将内容与默认网格嵌套,请添加一个新 .row 和一套 .col-sm-* 现有的列 .col-sm-* 柱。 嵌套行应包括一组总计不超过12个或更少的列（不需要全部使用12个可用列）。
<div class="container">
<div class="row">
<div class="col-sm-9"> 1级：.col-sm-9 <div class="row">
<div class="col-8 col-sm-6"> 2级：.col-8 .col-sm-6 </div>
<div class="col-4 col-sm-6"> 级别2：.col-4 .col-sm-6 </div>
</div>
</div>
</div>
</div>无礼的混蛋
使用Bootstrap的源Sass文件时,您可以选择使用Sass变量和mixins创建自定义,语义和响应式页面布局。 我们预定义的网格类使用这些相同的变量和mixin为快速响应的布局提供了一整套现成的类。
变量
变量和映射确定列数,装订线宽度以及开始浮动列的媒体查询点。 我们使用它们来生成上面记录的预定义网格类,以及下面列出的自定义混合类。
混合蛋白
Mixins与网格变量结合使用以为单个网格列生成语义CSS。
用法示例
您可以将变量修改为自己的自定义值,或仅将mixins及其默认值使用。 这是一个使用默认设置来创建一个两栏式布局,之间有一个间隙的示例。
<div class="example-container">
<div class="example-row">
<div class="example-content-main"> 主要内容 </div>
<div class="example-content-secondary"> 次要内容 </div>
</div>
</div>自定义网格
使用我们内置的表格Sass变量和地图,可以完全自定义预定义的表格类。 更改层数,媒体查询尺寸和容器宽度,然后重新编译。
列和装订线
网格列数可以通过Sass变量进行修改。 $grid-columns 用于生成每列的宽度（以百分比为单位）,而 $grid-gutter-width 设置列装订线的宽度。
网格层
除了列本身之外,您还可以自定义网格层数。 如果您只需要四个网格层,则可以更新 $grid-breakpoints and $container-max-widths 这样的事情：
对Sass变量或映射进行任何更改时,您需要保存更改并重新编译。 这样做将为列宽,偏移量和顺序输出一组全新的预定义网格类别。 响应性可见性实用程序也将更新为使用自定义断点。 确保在中设置网格值 px (not rem,em , or % ).
