栅格系统_栅格系统最多支持几个断点-CSDN博客

使用强大的以移动为先的flexbox网格，通过12列系统、5个默认响应层、Sass变量和mixin，以及几十个预定义类，来构建各种形状和大小的布局。

怎么工作的

Bootstrap的网格系统使用一系列容器，行和列来布局和对齐内容。它是使用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。

下面是它的工作原理:

容器提供了将站点内容居中并水平放置的方法。使用.container作为响应像素宽度或.container-fluid作为宽度:100%跨越所有视口和设备尺寸。
行是列的包装器。每个列都有水平的填充(称为边距)来控制它们之间的空间。然后，padding在具有负边距的行上抵消这些填充。这样，列中的所有内容在视觉上都是左对齐的。
由于flexbox，没有指定宽度的网格列将自动布局为等宽列。例如，.col-sm的四个实例将自动地从小断点开始扩展25%宽度。
列类表示希望从每行的12个列中使用的列数。如果想要三个等宽的列，可以用.col-4。
列宽以百分比设置，因此它们始终是可变的，并且大小与父元素相关。
列有水平的内边距，用于在各个列之间创建沟槽，但是，可以从行中删除空白，而在.row上使用.no- gutters的列中删除内边距。
为了使网格响应，有五个网格断点，每个响应断点一个:所有断点(非常小)、小、中、大和非常大。
网格断点基于最小宽度的媒体查询，这意味着它们适用于一个断点和它上面的所有断点(例如，. cole -sm-4适用于小型、中型、大型和超大设备，但不适用于第一个xs断点)。
可以使用预定义的网格类(如. cole -4)或Sass mixin实现更多的语义标记。

要注意flexbox的局限性和bug，比如不能使用一些HTML元素作为flex容器。

网格选项

Bootstrap使用ems或rems定义大多数大小，而pxs用于网格断点和容器宽度。这是因为视口宽度以像素为单位，不随字体大小而改变。

借助便捷的表格，了解Bootstrap网格系统在多个设备上如何工作。

	特小 <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Large ≥992px
最大容器宽度	无（自动）	540px	720px	960px	1140px
类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
列数	12	12	12	12	12
槽宽度	30px（每列15px）	30px（每列15px）	30px（每列15px）	30px（每列15px）	30px（每列15px）
可嵌套	是	是	是	是	是
列顺序	是	是	是	是	是

自动布局列

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

等宽

例如，这里有两个网格布局，从xs到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 bug，如果没有显式的flex-basis或border，就无法工作。对于较老的浏览器版本，有一些解决方法，但是如果目标浏览器没有陷入有bug的版本，这些方法就没有必要了。

在这里插入图片描述

<div class="container">
  <div class="row">
    <div class="col">同</div>
    <div class="col">同</div>
    <div class="w-100"></div>
    <div class="col">同</div>
    <div class="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>

可变宽度的内容

根据内容的自然宽度使用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和.col-*类。当需要特定大小的列时，指定一个编号的类;否则，可以继续使用.col。
在这里插入图片描述

<div class="container">
  <div class="row">
    <div class="col">同</div>
    <div class="col">同</div>
    <div class="col">同</div>
    <div class="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）处变为水平的。
在这里插入图片描述

<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>

混合和匹配

不希望列只是简单地堆叠在一些网格层?可以根据需要为每一层使用不同的类组合。
在这里插入图片描述

<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上设置一个负的margin实用程序，并在.col上设置与之匹配的padding实用程序。container或container-fluid父容器可能也需要调整，以避免不必要的溢出，再次使用匹配的padding实用工具。
下面是一个在大型(lg)断点及以上自定义Bootstrap网格的示例，里面增加了.col内边距。px-lg-5，用父行上的.mx-lg-n5来抵消，然后用.px-lg-5调整.container包装。
在这里插入图片描述

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

行列

使用响应性强的.row-cols-n类快速设置最佳呈现内容和布局的列数。普通的.col-n 类应用于单独的列(例如.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()：

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

对齐

使用flexbox对齐工具来垂直和水平对齐列。当flex容器具有如下所示的min-height时，Internet Explorer 10-11不支持flex项的垂直对齐。

垂直对齐

在这里插入图片描述

<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删除预定义网格类中列之间的沟槽。这将删除.row中的负边距和所有直接子列中的水平填充。
下面是创建这些样式的源代码。注意，列覆盖的范围仅限于第一个子列，并通过属性选择器进行定位。虽然这会生成一个更具体的选择器，但仍然可以使用间距工具进一步定制列填充。
需要一个边缘到边缘的设计?删除父项.container或.container-fluid。

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

实际上，这是它的外观。请注意，可以继续将其与所有其他预定义的网格类（包括列宽，响应层，重新排序等）一起使用。
在这里插入图片描述

<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列，则每组额外的列将作为一个单元包装到新行上。
在这里插入图片描述

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>由于9 + 4 = 13 &gt; 12，因此该4列宽的div作为一个连续单位被换行到新行上。</div>
    <div class="col-6">.col-6<br>随后的列沿新行继续。</div>
  </div>
</div>

列中断

在flexbox中将列拆分为新行需要一个小技巧：在任何要将列包装到新行的位置添加一个width: 100%元素。通常，这是通过多个.rows 完成的，但是并非每种实现方法都可以解决这个问题。
在这里插入图片描述

<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>

    <!-- Force next columns to break to new line -->
    <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>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <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>

重新排序

订单类

使用.order-类来控制内容的可视顺序。这些类是响应性的，因此可以通过断点(例如.order-1.order-md-2)来设置订单。包括对所有5个网格层的1到12的支持。
在这里插入图片描述

<div class="container">
  <div class="row">
    <div class="col">
      DOM中的第一个，不应用任何顺序
    </div>
    <div class="col order-12">
      在DOM中排名第三，顺序为1
    </div>
    <div class="col order-1">
      DOM中的第二大顺序
    </div>
  </div>
</div>

还有响应性的.order-first和.order-last类，它们分别应用order: -1和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- grid类和margin实用工具。网格类的大小与列匹配，而在偏移宽度可变的情况下，页边距对于快速布局更有用。

抵消类

使用.offset-md-n类将列向右移动。这些类将列的左边框增加n列。例如，.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，可以使用margin实用工具，例如，.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-auto</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-auto</div>
  </div>
</div>

嵌套

要将内容嵌套到默认网格中，请在现有的.col-sm-n列中添加一个新的.row和一组.col-sm-n列。嵌套的行应该包含一组列，这些列加起来不超过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>

Sass mixin

在使用Bootstrap的源Sass文件时，可以选择使用Sass变量和mixin来创建自定义、语义化和响应式页面布局。预定义的网格类使用这些相同的变量和mixin来提供一套快速响应布局的现成类。

变量

变量和映射确定列的数目、沟槽宽度和开始浮动列的媒体查询点。使用它们来生成上述文档中预定义的网格类，以及下面列出的自定义mixin。

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

mixin

mixin与网格变量一起使用，为各个网格列生成语义CSS。

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

用法示例

可以将变量修改为自定义值，或者只是将mixin与它们的默认值一起使用。下面是一个使用默认设置创建两列布局的示例，其中有一个间隔。

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

在这里插入图片描述

<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- guter -width用于设置列装订线的宽度。

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

网格层

除了列本身之外，还可以自定义网格层的数量。如果只想要4个网格层，可以将$grid-breakpoints和 $container-max-widths更新为如下内容:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

对Sass变量或映射进行任何更改时，需要保存更改并重新编译。这样做将为列宽，偏移量和顺序输出一组全新的预定义网格类别。响应性可见性实用程序也将更新为使用自定义断点。确保在px中设置网格值(而不是rem、em或%)。