我們知道，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所有變化的官方說明：