我们知道，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所有变化的官方说明：