Bootstrap 4 布局

Bootstrap 4 布局

使用 flex 类控制 Bootstrap 4 组件的布局。


弹性盒

Bootstrap 3 和 Bootstrap 4 的最大区别在于,Bootstrap 4 现在使用 flexbox 而不是浮动来处理布局。

灵活的盒子布局模块,可以更轻松地设计灵活的响应式布局结构,而无需使用浮动或定位。 如果您是 flex 新手,可以阅读我们的 CSS Flexbox 教程

注意:IE9 及更早版本不支持 Flexbox。

如果需要 IE8-9 支持,请使用 Bootstrap 3。 最稳定的 Bootstrap 版本,团队仍然支持它进行关键错误修复和文档更改。 但是,不会添加任何新功能。

要创建 flexbox 容器并将直接子项转换为 flex 项,请使用 d-flex 类:

实例

弹性项目 1
弹性项目 2
弹性项目 3

实例

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>
亲自试一试 »

要创建内联 flexbox 容器,请使用 d-inline-flex 类:

实例

弹性项目 1
弹性项目 2
弹性项目 3

实例

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>
亲自试一试 »

水平方向

使用 .flex-row 水平显示弹性项目(并排)。 这是默认设置。

提示:使用.flex-row-reverse来右对齐水平方向:

实例

弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 1
弹性项目 2
弹性项目 3

实例

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>

<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>
亲自试一试 »

垂直方向

使用 .flex-column 垂直显示弹性项目(彼此重叠),或 .flex- column-reverse 反转垂直方向:

实例

弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 1
弹性项目 2
弹性项目 3

实例

<div class="d-flex flex-column">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>

<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>
亲自试一试 »


证明内容

使用 .justify-content-* 类来改变弹性项目的对齐方式。 有效的类是 start(默认)、endcenter介于左右

实例

弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 1
弹性项目 2
弹性项目 3

实例

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
亲自试一试 »

填充/等宽

在弹性项目上使用 .flex-fill 强制它们等宽:

实例

弹性项目 1
弹性项目 2
弹性项目 3

实例

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">弹性项目 1</div>
  <div class="p-2 bg-warning flex-fill">弹性项目 2</div>
  <div class="p-2 bg-primary flex-fill">弹性项目 3</div>
</div>
亲自试一试 »

Grow

在弹性项目上使用 .flex-grow-1 以占用其余空间。 在下面的示例中,前两个弹性项目占用了它们必要的空间,而最后一个项目占用了剩余的可用空间:

实例

弹性项目 1
弹性项目 2
弹性项目 3

实例

<div class="d-flex">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary flex-grow-1">弹性项目 3</div>
</div>
亲自试一试 »

提示:在弹性项目上使用 .flex-shrink-1 使其在必要时收缩。


Order

使用 .order 类更改特定弹性项目的视觉顺序。 有效的类是从 0 到 12,其中最小的数字具有最高的优先级(order-1 显示在 order-2 之前,等等):

实例

弹性项目 1
弹性项目 2
弹性项目 3

实例

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">弹性项目 1</div>
  <div class="p-2 bg-warning order-2">弹性项目 2</div>
  <div class="p-2 bg-primary order-1">弹性项目 3</div>
</div>
亲自试一试 »

自动边距

使用 .mr-auto (将项目向右推)或使用 轻松为弹性项目添加自动边距 .ml-auto(向左推项目):

实例

弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 1
弹性项目 2
弹性项目 3

实例

<div class="d-flex bg-secondary">
  <div class="p-2 mr-auto bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 ml-auto bg-primary">弹性项目 3</div>
</div>

亲自试一试 »

Wrap

使用 .flex-nowrap(默认)、.flex-wrap.flex-wrap-reverse 控制弹性项目在弹性容器中的包装方式。

单击下面的按钮,通过更改示例框中的弹性项目的包装来查看三个类之间的区别:

实例

弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 4
弹性项目 5
弹性项目 6
弹性项目 7
弹性项目 8
弹性项目 9
弹性项目 10
弹性项目 11
弹性项目 12
弹性项目 13
弹性项目 14
弹性项目 15
弹性项目 16
弹性项目 17
弹性项目 18
弹性项目 19
弹性项目 20
弹性项目 21
弹性项目 22
弹性项目 23
弹性项目 24
弹性项目 25

实例

<div class="d-flex flex-wrap">..</div>

<div class="d-flex flex-wrap-reverse">..</div>

<div class="d-flex flex-nowrap">..</div>
亲自试一试 »

对齐内容

使用 .align-content-* 类控制 聚集 弹性项目的垂直对齐方式。 有效的类是 .align-content-start(默认)、.align-content-end.align-content-center, .align-content-between, .align-content-around.align-content-stretch.

注释:这些类对单行弹性项目没有影响。

点击下面的按钮查看五个类之间的区别,通过改变示例框中的弹性项目的垂直对齐方式:

实例

弹性项目 1
弹性项目 2
弹性项目 3
弹性项目 4
弹性项目 5
弹性项目 6
弹性项目 7
弹性项目 8
弹性项目 9
弹性项目 10
弹性项目 11
弹性项目 12
弹性项目 13
弹性项目 14
弹性项目 15
弹性项目 16
弹性项目 17
弹性项目 18
弹性项目 19
弹性项目 20
弹性项目 21
弹性项目 22
弹性项目 23
弹性项目 24
弹性项目 25

实例

<div class="d-flex flex-wrap align-content-start">..</div>

<div class="d-flex flex-wrap align-content-end">..</div>

<div class="d-flex flex-wrap align-content-center">..</div>

<div class="d-flex flex-wrap align-content-around">..</div>

<div class="d-flex flex-wrap align-content-stretch">..</div>
亲自试一试 »

对齐项目

使用 .align-items-* 类控制 单行 弹性项目的垂直对齐方式。 有效的类是 .align-items-start.align-items-end.align-items-center.align-items-baseline.align -items-stretch(默认)。

点击下面的按钮查看五个类的区别:

实例

弹性项目 1
弹性项目 2
弹性项目 3

实例

<div class="d-flex align-items-start">..</div>

<div class="d-flex align-items-end">..</div>

<div class="d-flex align-items-center">..</div>

<div class="d-flex align-items-baseline">..</div>

<div class="d-flex align-items-stretch">..</div>
亲自试一试 »

对齐自我

使用 .align-self-* 类控制指定的弹性项目的垂直对齐方式。 有效的类是 .align-self-start.align-self-end.align-self-center.align-self-baseline.align -self-stretch(默认)。

点击下面的按钮查看五个类的区别:

实例

弹性项目 1
弹性项目 2
弹性项目 3

实例

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">弹性项目 1</div>
  <div class="p-2 borderalign-self-start">弹性项目 2</div>
  <div class="p-2 border">弹性项目 3</div>
</div>
亲自试一试 »

响应式 Flex 类

所有 flex 类都带有额外的响应类,这使得在特定的屏幕尺寸上设置特定的 flex 类变得容易。

* 符号可以替换为 sm、md、lg 或 xl,分别代表小、中、大或超大屏幕。

描述 例子
Flex Container    
.d-*-flex 为不同的屏幕创建一个 flexbox 容器 测试一下
.d-*-inline-flex 为不同的屏幕创建一个内联 flexbox 容器 测试一下
Direction    
.flex-*-row 在不同的屏幕上水平显示弹性项目 测试一下
.flex-*-row-reverse 在不同的屏幕上水平显示弹性项目并右对齐 测试一下
.flex-*-column 在不同的屏幕上垂直显示弹性项目 测试一下
.flex-*-column-reverse 在不同的屏幕屏幕上以相反的顺序垂直显示弹性项目 测试一下
Justified Content    
.justify-content-*-start 在不同屏幕上从头开始(左对齐)显示弹性项目 测试一下
.justify-content-*-end 在不同屏幕的末尾(右对齐)显示弹性项目 测试一下
.justify-content-*-center 在不同屏幕上的 flex 容器的中心显示 弹性项目 测试一下
.justify-content-*-between 在不同屏幕上的"中间"显示弹性项目 测试一下
.justify-content-*-around 在不同的屏幕上"围绕"显示弹性项目 测试一下
Fill / Equal Width    
.flex-*-fill 强制 弹性项目在不同屏幕上的宽度相等 测试一下
Grow    
.flex-*-grow-0 不要让项目在不同的屏幕上增长  
.flex-*-grow-1 让项目在不同的屏幕上增长  
Shrink    
.flex-*-shrink-0 不要让项目在不同的屏幕上缩小  
.flex-*-shrink-1 使项目在不同屏幕上缩小  
Order    
.order-*-0-12 在小屏幕上将顺序从 0 更改为 12 测试一下
Wrap    
.flex-*-nowrap 不要在不同的屏幕上包装项目 测试一下
.flex-*-wrap 在不同的屏幕上包装项目 测试一下
.flex-*-wrap-reverse 反转项目在不同屏幕上的包装 测试一下
Align Content    
.align-content-*-start 从一开始就在不同的屏幕上对齐收集的项目 测试一下
.align-content-*-end 在不同屏幕上对齐最后收集的项目 测试一下
.align-content-*-center 在不同屏幕的中心对齐收集的项目 测试一下
.align-content-*-around 在不同屏幕上"围绕"对齐收集的项目 测试一下
.align-content-*-stretch 在不同的屏幕上拉伸收集的项目 测试一下
Align Items    
.align-items-*-start 在不同屏幕上从头开始对齐单行项目 测试一下
.align-items-*-end 在不同屏幕的末尾对齐单行项目 测试一下
.align-items-*-center 在不同屏幕的中心对齐单行项目 测试一下
.align-items-*-baseline 在不同屏幕上对齐基线上的单行项目 测试一下
.align-items-*-stretch 在不同屏幕上拉伸单行项目 测试一下
Align Self    
.align-self-*-start 在不同屏幕上从头开始对齐 弹性项目 测试一下
.align-self-*-end 在不同屏幕的末尾对齐 弹性项目 测试一下
.align-self-*-center 在不同屏幕的中心对齐 弹性项目 测试一下
.align-self-*-baseline 在不同屏幕的基线上对齐 弹性项目 测试一下
.align-self-*-stretch 在不同的屏幕上拉伸弹性项目 测试一下