简介

布置 Bootstrap 项目的组件和设置,包括包装容器,强大的栅格系统,灵活的媒体对象和响应式工具。

容器

容器(Containers)是 Bootstrap 中最基本的布局基础。特别是,如果要使用栅格系统来进行布局时。容器会根据屏幕大小来选择合适的宽度,这是全自动的。

虽然容器可以嵌套,但大多数布局不需要嵌套容器。

<div class="container">
  <!-- Content here -->
</div>

对于全宽容器,使用 .container-fluid ,跨越 viewport 的整个宽度。

<div class="container-fluid">
  ...
</div>

响应式断点

Bootstrap 是基于移动设备优先的理念设计的。因此我们使用少量媒体查询为我们的布局和界面创建合理的断点。 这些断点主要基于最小 viewport 宽度,并允许我们在 viewport 更改时放大元素。

Bootstrap 主要在我们的布局,栅格系统和组件的源 Sass 文件中使用以下媒体查询范围或断点。

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

由于我们在 Sass 中编写源 CSS,因此我们所有的媒体查询都可以通过 Sass mixins 获得:

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

我们偶尔会使用向另一个方向(给定屏幕尺寸或更小)的媒体查询:

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

请注意,由于浏览器当前不支持范围上下文查询,因此我们通过使用更高的值来解决具有小数宽度的 min- 和 max- 前缀 和 viewport 的限制(例如,在高dpi设备的某些条件下可能会出现这种情况) 这些比较的精确度。

再次,这些媒体查询也可以通过 Sass mixins 获得:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

还有媒体查询和mixin,用于使用最小和最大断点宽度来定位单个屏幕尺寸。

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

这些媒体查询也可以通过Sass mixins获得:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

同样,媒体查询可能跨越多个断点宽度:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

针对相同屏幕尺寸范围的 Sass mixin 将是:

@include media-breakpoint-between(md, xl) { ... }

Z-index

几个 Bootstrap 组件使用 z-index,CSS 属性通过提供z轴来排列内容来帮助控制布局。 我们在 Bootstrap 中使用默认的 z-index 值,该值旨在正确地分层导航,工具提示和弹出窗口,模态等。

这些较高的值从任意数字开始,高且具体到足以理想地避免冲突。 我们需要在我们的分层组件中使用这些标准集 - 工具提示,弹出窗口,导航栏,下拉菜单,模态 - 因此我们可以在行为中合理地保持一致。 我们使用100+或500+。

我们不鼓励定制这些值; 如果你换一个,你可能需要修改很多地方。

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

为了处理组件内的重叠边界(例如,输入组中的按钮和输入),我们使用1,2和3的低单位数z-index值作为默认,悬停和活动状态。 在悬停/焦点/活动时,我们将一个特定元素带到最前面,使用更高的z-index值来显示它们在兄弟元素上的边界。

栅格系统

借助十二列系统,五个默认响应层,Sass 变量和 mixins 以及数十个预定义类,使用我们强大的移动优先 flexbox 栅格来构建各种形状和大小的布局。

它是怎么做到的?

Bootstrap 的栅格系统使用一系列容器,行和列来布局和对齐内容。 它是用 flexbox 构建的,并且完全响应。 下面是一个示例,并深入了解栅格如何组合在一起。

没听说过 flexbox? 在这里看看什么是flexbox

One of three columns
One of three columns
One of three columns
<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 表示宽度:所有 viewport 和设备大小均为100%。
  • 行是列的包装器。 每列都有水平填充(padding)(称为装订线),用于控制它们之间的空间。 然后在具有负边距的行上抵消该填充。 这样,列中的所有内容都在左侧视觉对齐。
  • 在栅格布局中,内容必须放在列中,并且只有列可以是行的直接子项。
  • 由于flexbox,没有指定宽度的栅格列将自动布局为相等宽度的列。 例如,.col-sm的四个实例将从小断点开始自动为25%宽。 有关更多示例,请参阅自动布局列部分。
  • 列类指示你希望在每行可能使用的12列中使用的列数。 因此,如果你想要三个相等宽度的列,则可以使用.col-4。
  • 列宽以百分比形式设置,因此它们总是相对于其父元素是流动的和大小的。
  • 列具有水平填充以在各列之间创建装订线,但是,你可以从.row中删除行和使用.no-gutters的列填充边距。
  • 为了使栅格具备响应式设计,共有五个栅格断点,每个响应断点一个:所有断点(超小),小,中,大和超大。
  • 栅格断点基于最小宽度的媒体查询,这意味着它们适用于那个断点以及它上面的所有断点(例如,.col-sm-4适用于小型,中型,大型和超大型设备,但不适用于第一个xs断点))。
  • 你可以使用预定义的栅格类(如.col-4)或Sass mixins进行更多语义标记。

请注意 flexbox 存在的限制和 bug, 例如 无法将某些 HTML 元素用作 Flex 容器.

栅格系统 选项

虽然 Bootstrap 使用 ems 或 rems 来定义大多数大小,但 px 用于栅格断点和容器宽度。 这是因为 viewport 宽度以像素为单位,并且不随字体大小而变化。

你可以通过改变当前浏览器的大小来了解 Bootstrap 栅格系统的各个方面如何通过在多个设备上工作(因为本文档就是基于 Bootstrap 编写的)。

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes

列的自动布局

利用特定于断点的列类,可以轻松进行列大小调整,而无需使用明确的编号类,如 .col-sm-6

等宽

例如,这里有两个适用于每个设备和 viewport 的栅格布局,从 xs 到 xl。 为你需要的每个断点添加任意数量的无单位类,每列的宽度相同。

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>

等宽列可以分成多行,但是有一个 Safari flexbox 错误阻止它在没有明确的 flex-basis 或 border 的情况下工作。 旧浏览器版本有变通方法,但如果你是最新的,则不需要它们。

Column
Column
Column
Column
<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 栅格列的自动布局还意味着你可以设置一列的宽度,并让兄弟列自动调整其大小。 你可以使用预定义的栅格类(如下所示),栅格混合或内联宽度。 请注意,无论中心列的宽度如何,其他列都将调整大小。

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>

多行等宽

通过在希望列断开到新行的位置插入.w-100,创建跨越多行的等宽列。 通过将.w-100与一些响应式显示工具混合来使响应中断。

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

响应式设计CSS类

Bootstrap 的栅格包括五层预定义类,用于构建复杂的响应式布局。 根据你认为合适的额外小型,小型,中型,大型或超大型设备自定义列的大小。

所有的断点

对于从最小设备到最大设备相同的栅格,请使用 .col 和 .col-* 类。 需要特别大小的列时,请指定编号的类; 否则,请只使用 .col。

col
col
col
col
col-8
col-4
<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-* 类,你可以创建一个基本的栅格系统,该系统开始堆叠并在小断点(sm)处变为水平。

col-sm-8
col-sm-4
col-sm
col-sm
col-sm
<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>

混合排列

不希望你的列只是在一些栅格层中堆叠? 根据需要为每个层使用不同类的组合。 请参阅下面的示例,以便更好地了解它是如何工作的。

.col-12 .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
<!-- 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>

对齐

使用 flexbox 对齐工具垂直和水平对齐列。

垂直对齐

One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
<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>
One of three columns
One of three columns
One of three columns
<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>

水平对齐

One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
<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>

无间隙

我们预定义的栅格类中的列之间的间隙可以使用 .no-gutters 删除。 这将从 .row 中删除负边距,并从所有直接子列中删除水平边距。

这是创建这些样式的源代码。 请注意,列覆盖仅限于第一个子列,并通过属性选择器进行定位。 虽然这会生成更具体的选择器,但仍可以使用间距工具进一步自定义列填充。

采用了无边框地设计方案? 只需要把上层的 .container 类 或 .container-fluid 类移除。

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

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

在实践中,这是它的外观。 请注意,你可以继续将其与所有其他预定义栅格类(包括列宽,响应层,重新排序等)一起使用。

.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
<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>

列包含

如果在一行中放置超过12列,则每组额外列将作为一个单元包裹到新行上。

.col-9
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6
Subsequent columns continue along the new line.
<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>

列拆分

将列拆分为 flexbox 中的新行需要一个小的 hack:添加宽度为100%的元素,无论你是否想将列包装到新行。 通常,这是通过多个 .rows 完成的,但并非每种实现方法都可以解释这一点。

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
<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>

你也可以使用我们的响应式显示工具在特定断点处应用此拆分。

.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
<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-1.order-md-2)。 包括 112 都可以在栅格系统中受到支持。

First, but unordered
Second, but last
Third, but first
<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-last 类,用于更改 order 对元素进行 order: -1order: 13 (order: $columns + 1), 这些类也可以根据需要与编号为 .order-* 的类混合。

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

列偏移

你可以通过两种方式偏移栅格列:响应式 .offset- 栅格类和我们的margin工具。 栅格类的大小可以匹配列,而边距对于偏移宽度可变的快速布局更有用。

Offset 类

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

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
<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>

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

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
<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>

Margin 工具

你可以使用诸如 .mr-auto 之类的margin 工具来强制兄弟列彼此远离。

.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto
<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>

嵌套

要使用默认栅格嵌套内容,请添加一个新的 .row 和一组 .col-sm-* 现有 .col-sm-* 列中的列。 嵌套行应包含一组最多可添加12个或更少的列(不要求你使用所有12个可用列)。

Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
<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 变量和 mixins 来创建自定义,语义和响应式页面布局。 我们的预定义栅格类使用这些相同的变量和 mixins 来提供一整套即用型类,以实现快速响应式布局。

变量

变量和映射确定列的数量,装订线宽度以及开始浮动列的媒体查询点。 我们使用它们来生成上面记录的预定义栅格类,以及下面列出的自定义混合类。

$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);

用法示例

你可以将变量修改为你自己的自定义值,或者只使用带有默认值的 mixins。 下面是使用默认设置创建两列布局的示例。

.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);
  }
}
Main content
Secondary content
<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 变量和映射,可以完全自定义预定义的栅格类。 更改层数,媒体查询维度和容器宽度 - 然后重新编译。

列和间隙

可以通过Sass变量修改栅格列的数量。$grid-columns用于生成每个列的宽度(以百分比表示),而 $grid-gutter-width 用于设置列的间隙宽度。

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

栅格层数

超出列的层数时,你还可以自定义栅格层的数量。 如果你只想要四个栅格层,则需要将 $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中设置栅格值(不是 remem%)。

媒体对象

构建高度重复的组件,如博客评论,推文等。

例子

媒体对象有助于构建复杂且重复的组件,其中一些媒体与不包围所述媒体的内容并置。 此外,由于 flexbox,它只需要两个必需的类。

以下是单个媒体对象的示例。 只需要两个类 - 包裹 .media.media-body 围绕你的内容。 可选的填充和边距可以通过 spacing 工具来控制。

Generic placeholder image
标题
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
  <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">标题</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>
Flexbug #12: 内联元素不被视为弹性项

Internet Explorer 10-11不会将内联元素(如链接或图像(或 :: before 和 :: after 伪元素))渲染为弹性项目。 唯一的解决方法是设置非内联显示值(例如,块,内联块或 flex )。 我们建议使用我们的显示工具之一 .d-flex 作为一个简单的修复程序。

信息来源 Flexbugs on GitHub

嵌套

媒体对象可以无限嵌套,但我们建议你在某个时候停止。 将嵌套的 .media 放在父媒体对象的 .media-body 中。

Generic placeholder image
标题
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image
标题
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
  <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">标题</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    <div class="media mt-3">
      <a class="pr-3" href="#">
        <img src=".../64x64" alt="Generic placeholder image">
      </a>
      <div class="media-body">
        <h5 class="mt-0">标题</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>

对齐

媒体对象中的媒体可以与flexbox工具对齐到 .media-body 内容的顶部(默认),中间或末尾。

Generic placeholder image
顶部对齐

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <img class="align-self-start mr-3" src=".../64x64" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">顶部对齐</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
Generic placeholder image
中间对齐

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <img class="align-self-center mr-3" src=".../64x64" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">中间对齐</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
Generic placeholder image
底部对齐

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <img class="align-self-end mr-3" src=".../64x64" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">底部对齐</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

顺序

通过修改 HTML 本身或通过添加一些自定义 Flexbox CSS 来设置 order 属性(更改为你选择的值)来更改媒体对象中的内容顺序。

Media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image
<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Media object</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
  <img class="ml-3" src=".../64x64" alt="Generic placeholder image">
</div>

列表

由于媒体对象具有如此少的结构要求,因此你还可以在列表 HTML 元素上使用这些类。 在 <ul><ol> 上,添加 .list-unstyled 以删除任何浏览器默认列表样式,然后将 .media 应用于 <li>。 与往常一样,在需要微调的地方使用 spacing 工具。

  • Generic placeholder image
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • Generic placeholder image
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • Generic placeholder image
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<ul class="list-unstyled">
  <li class="media">
    <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media my-4">
    <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media">
    <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
</ul>

布局工具

为了实现更快的移动友好和响应式开发,Bootstrap 包含许多工具类,用于显示,隐藏,对齐和间隔内容。

切换 display

使用我们的显示工具来响应切换 display 属性的常用值。 将其与我们的栅格系统,内容或组件混合,以在特定 viewport 中显示或隐藏它们。

Flexbox 选项

Bootstrap 4 是使用 flexbox 构建的,但并不是每个元素的 display 都被更改为 display: flex,因为这会添加许多不必要的覆盖,并意外地更改关键浏览器行为。 此外,我们的大多数组件都是在启用 Flexbox 的情况下构建的。

如果需要将 display: flex 添加到元素,请使用 .d-flex 或其中一个响应式变体类(例如 .d-sm-flex )。 你需要此类或 display 值才能使用我们额外的 flexbox 工具来调整大小,对齐,间距等。

边距和间距

使用边距(margin)和间距(padding)工具来控制元素和组件的间距和大小。 Bootstrap 4 包含基于 1rem 值默认 $spacer 变量的间隔工具的五级尺度。 选择所有 viewport 的值(例如,.mr-3 表示 margin-right: 1rem),或选择响应变体以定位特定 viewport(例如,.mr-md-3 表示 margin-right: 1remmd 断点开始)。

切换 可见性

当内容不需要显示时,你可以使用我们的可见性工具切换元素的可见性。 不可见元素仍将影响页面的布局,但在视觉上对访问者隐藏。