Bootstrap5 Flex(弹性)布局
Bootstrap5 通过 flex 类来控制页面的布局。
弹性盒子(flexbox)
Bootstrap 3 与 Bootstrap 4/5 最大的区别就是 Bootstrap 4/5 使用弹性盒子来布局,而不是使用浮动来布局。
弹性盒子是 CSS3 的一种新的布局模式,更适合响应式的设计,如果你还不了解 flex,可以阅读我们的 CSS3 弹性盒子(Flex Box) 教程
注意:IE9 及其以下版本不支持弹性盒子,所以如果你需要兼容 IE8-9,请使用 Bootstrap 3。
以下实例使用 d-flex 类创建一个弹性盒子容器,并设置三个弹性子元素:
实例
Flex item 1
Flex item 2
Flex item 3
尝试一下 »
创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类:
实例
Flex item 1
Flex item 2
Flex item 3