Bootstrap 4 布局

Bootstrap 4 布局

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

弹性盒

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

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

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

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

水平方向

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

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

垂直方向

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

证明内容

使用 .justify-content-* 类来改变弹性项目的对齐方式。 有效的类是 start（默认）、end、center，介于或左右:

填充/等宽

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

Grow

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

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

Order

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

自动边距

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

Wrap

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

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

对齐内容

使用 .align-content-* 类控制 聚集 弹性项目的垂直对齐方式。 有效的类是 .align-content-start（默认）、.align-content-end、.align-content-center, .align-content-between, .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（默认）。

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

响应式 Flex 类

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

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