Bootstrap 3 -> 4 : 居中布局的变化 - fox_charon

Bootstrap 3 -> 4 : 居中布局的变化

我们知道，Bootstrap布局的核心是栅格系统，一行有12个栅格。

比如，我想让两个宽度400px左右的div居中显示。

这个时候，我们可以利用栅格的列偏移功能。

<div class="row">
  <div class="col-md-4 col-md-offset-2">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

但这仅适用于Bootstrap 3 。

因为Bootstrap 4 把列偏移给移除了。

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

有的同学可能会觉得这个justify-content-center有点眼熟：这不是弹性盒子(display:flex)里面的东西吗？

没错，Bootstrap 4的布局系统引入了弹性盒子(display:flex)。

这也意味着，Bootstrap 4的兼容性变差了。

而官方文档也是这么说的。

Dropped IE8, IE9, and iOS 6 support. v4 is now only IE10+ and iOS 7+. For sites needing either of those, use v3.

放弃了IE8 IE9 IOS6的支持，Bootstrap 4只支持IE10+和IOS7+的浏览器。如果你需要支持，请用Bootstrap 3。

而文档里也明确说明引入了弹性盒子(display:flex)。

Moved to flexbox.
    Added support for flexbox in the grid mixins and predefined classes.
    As part of flexbox, included support for vertical and horizontal alignment classes.

Bootstrap 3 -> 4所有变化的官方说明：

https://v4.bootcss.com/docs/4.0/migration/