在线文档教程
首页 技术教程 开发文档 觅分类 ICON图标
技术教程 开发文档 觅分类 ICON图标

网格 | Grid

Grid 系统

Bootstrap 包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)，支持 Sass mixins 自由调用，并结合自己预定义的 CSS、Js 类，用来创建各种形状和尺寸的布局。

运行方式

Bootstrap 的网格系统使用一系列容器，行和列来布局和对齐内容。它使用 flexbox 构建，并且完全响应。下面是一个例子，并深入研究 Grid 如何结合在一起。

新的或不熟悉的 Flexbox？ 阅读 CSS 技巧 Flexbox 指南了解背景，术语，指导原则和代码片段。

打开 getbootstrap.com 上的示例

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

以上示例使用我们预定义的网格类在小型，中型，大型和超大型设备上创建三个等宽列。这些列在父页面的中心位置.container。

分解它，下面是它的工作原理：

  • 容器提供了一种中心和水平填充网站内容的方法。使用.container了应答像素宽度或.container-fluid用于width: 100%在所有视窗和器件尺寸。

  • 行是列的包装。每列都有水平的padding（称为阴沟）来控制它们之间的空间。这padding随后抵消上切缘阴性的行。这样，列中的所有内容都可以在左侧进行视觉对齐。

  • 在网格布局中，内容必须放在列中，并且只有列可以是行的直接子节点。

  • 感谢 flexbox，没有指定的网格列width会自动布局为等宽列。例如，四个.col-sm意志的实例每个都会自动从小断点开始增加25％。有关更多示例，请参阅自动布局列部分。

  • 列类指出了每列中可能使用12列的列数。所以，如果你想要三个等宽的列，你可以使用.col-4。

  • 列width以百分比形式设置，因此它们始终是流畅的，并且相对于其父元素的大小。

  • 列具有水平线padding以创建单个列之间的排水沟，但是，您可以使用列.row上的margin行和padding列删除.no-gutters列。

  • 为了使网格响应，有五个网格断点，每个响应断点一个：所有断点（特别小），小，中，大和特大。

  • 网格断点基于最小宽度的媒体查询，这意味着它们适用于那一个断点以及它上面的所有断点（例如，.col-sm-4适用于小型，中型，大型和超大型设备，但不适用于第一个xs断点）。

  • 您可以使用预定义的网格类（如.col-4）或 Sass mixins 来获得更多语义标记。

注意 flexbox 的局限性和错误，就像无法将一些 HTML 元素用作 flex 容器一样。

Grid 选项

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

请参阅引导网格系统的各个方面是如何在多个设备之间使用方便的表工作的。

​Extra small <576pxSmall ≥576pxMedium ≥768pxLarge ≥992pxExtra large ≥1200px
Max container widthNone (auto)540px720px960px1140px
Class prefix.col-.col-sm-.col-md-.col-lg-.col-xl-
of columns12
Gutter width30px (15px on each side of a column)
NestableYes
Column orderingYes

自动布局列

利用特定于断点的列类进行简单的列调整，而不使用显式编号类，例如.col-sm-6...

Equal-width

例如，下面是适用于所有的设备和视口，从两个网格布局xs来xl。为您需要的每个断点添加任意数量的无单位类，并且每列将具有相同的宽度。

打开 getbootstrap.com 上的示例

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

等宽列可以分成多行，但存在一个 Safari flexbox 缺陷，如果没有明确的flex-basis或无效的行为，border就可能无法工作。

有两种解决方案已在 Bootstrap 外简化测试用例不过，如果浏览器是最新的，这就不应该是必要的。

打开 getbootstrap.com 上的示例

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

设置一列宽度

Flexbox 网格列的自动布局还意味着您可以设置一列的宽度并让兄弟列自动调整其大小。您可以使用预定义的网格类（如下所示），网格混合或内联宽度。请注意，无论中央列的宽度如何，其他列都将调整大小。

打开 getbootstrap.com 上的示例

<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类根据内容的自然宽度调整列的大小。

打开getbootstrap.com上的示例

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

等宽多列

通过插入.w-100您希望这些列插入到新行的位置。通过混合.w-100和一些响应显示实用程序...

打开 getbootstrap.com 上的示例

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

响应类

引导程序的网格包括五个预定义类，用于构建复杂的响应性布局。在您认为合适的额外小、小、中、大或超大设备上自定义列的大小。

所有断点

对于从最小设备到最大网格相同的网格，请使用.col和.col-*上课。当您需要一个特别大小的列时，指定一个编号的类；否则，可以继续使用.col...

打开 getbootstrap.com 上的示例

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

水平堆

通过使用一组.col-sm-*类，您可以创建一个基本的网格系统，该系统在桌面（中型）设备上变为水平之前，先堆叠在额外的小型设备上。

打开 getbootstrap.com 上的示例

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

混合与匹配

不希望您的列简单地堆叠在某些网格层中？根据需要，为每一层使用不同类的组合。请参阅下面的示例，以更好地了解它是如何工作的。

打开 getbootstrap.com 上的示例

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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>

对齐

使用柔性盒对齐实用工具对齐纵横列。

垂直对准

打开 getbootstrap.com 上的示例

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

打开 getbootstrap.com 上的示例

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

水平对准

打开 getbootstrap.com 上的示例

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

没有 gutters

我们预定义的网格类中的列之间的排水沟可以使用.no-gutters。这消除了负margin从s .row和水平padding从所有直接子列。

以下是创建这些样式的源代码。请注意，列重写仅限于第一个子列，并且通过属性选择器进行定位。虽然这会生成更具体的选择器，但列填充仍可以使用间隔实用程序进一步定制。

需要边缘到边缘的设计？放弃父类.container或.container-fluid。

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

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

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

打开 getbootstrap.com 上的示例

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Column wrapping

如果在一行中放置了12列以上，则每组额外的列作为一个单元，将换到新行上。

打开 getbootstrap.com 上的示例

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Column breaks

在 flexbox 中将一列新行切分为新行需要小小的破解：width: 100%在要将列包装到新行的任何位置添加元素。通常这是用多个.row来实现的，但是从来没有实现方法可以解释这一点。

打开 getbootstrap.com 上的示例

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

您也可以在特定的断点上应用此中断。响应显示实用程序。

打开 getbootstrap.com 上的示例

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

重排

Order 类

使用.order-类来控制内容的视觉顺序。这些类是响应式的，所以你可以通过设置order断点（例如，.order-1.order-md-2）。包括1通过12所有五个网格层的支持。

打开 getbootstrap.com 上的示例

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

还有一个响应式.order-first类，可以通过应用快速更改一个元素的顺序order: -1。这个类也可以.order-*根据需要与编号的类混合使用。

打开 getbootstrap.com 上的示例

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

偏移列

您可以通过两种方式抵消网格列：我们的响应.offset-网格类和我们的保证金实用程序。网格类的大小与列匹配，而边距对于偏移量宽度可变的快速布局更有用。

偏移类

使用.offset-md-*类将列向右移动。这些类按*列增加列的左边距。例如，.offset-md-4移动.col-md-4四列。

打开 getbootstrap.com 上的示例

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

除了响应断点处的列清除外，您可能还需要重置偏移量。在网格示例中查看此操作。

打开 getbootstrap.com 上的示例

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

Margin utilities

随着在第4版中转向 flexbox，您可以使用保证金工具.mr-auto来强制兄弟列彼此远离。

打开 getbootstrap.com 上的示例

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

Nesting

嵌套使用默认网格您的内容，添加新的.row和一组.col-sm-*列现有的内.col-sm-*柱。嵌套行应包含一组最多不超过12个的列（不要求您使用全部12个可用列）。

打开 getbootstrap.com 上的示例

<div class="row">
  <div class="col-sm-9">
    Level 1: .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>

Sass mixins

使用 Bootstrap 的源 Sass 文件时，您可以选择使用 Sass 变量和 mixin 来创建自定义，语义和响应式页面布局。我们预定义的网格类使用这些相同的变量和 mixins 来为快速响应的布局提供一整套随时可用的类。

变量

变量和地图确定列的数量，gutter 宽度和开始浮动列的媒体查询点。我们使用这些来生成上面记录的预定义网格类，以及下面列出的自定义混合类。

$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

Mixins

Mixins 与网格变量一起使用，为单个网格列生成语义 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 {
  width: 800px;
  @include make-container(
}

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

打开 getbootstrap.com 上的示例

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

定制网格

使用内置的网格 Sass 变量和映射，完全可以定制预定义的网格类。更改层数、媒体查询维度和容器宽度-然后重新编译。

Columns 和 gutters

网格列的数量可以通过 Sass 变量修改。$grid-columns用于产生每个单独的列的宽度（以百分数表示），同时$grid-gutter-width允许断点特定宽度在跨越均匀划分padding-left并padding-right为列水槽。

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

Grid tiers

除了列本身之外，还可以自定义网格层的数量。如果只需要四个网格层，则需要更新$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或%）。

  • 黔ICP备2021005045号