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/