Bootstrap 4 Beta 中的列偏移類別有何變化？

Bootstrap 4.0.0-Beta 中的列偏移

在Bootstrap 4 Beta 中，偏移類別已更新，導致習慣使用「offset-」的用戶感到困惑md-*」來移動列。

Offset 類別變更

在Bootstrap 4 Beta 中，「offset-md-」類別已替換為「offset-{breakpoint}} -” 。」例如，要在中斷點上將列偏移兩列，您現在可以使用「offset-md-2」而不是「col-md-offset-2」。

ml-auto 進行列對齊

「ml-auto」類別提供了一種透過將列盡可能向右移動來對齊列的新方法。但是，這種自動邊距方法可能不適合所有場景。

自訂偏移解決方法

如果您需要特定的列偏移，例如偏移兩列，解決方法是使用虛擬列或占位符列以達到所需的效果。例如：

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

mx-auto 用於使列居中

要使列居中，請使用「mx-auto」類，它會在列兩側建立相等的邊距。

<div class="row">
  <div class="col-md-4 mx-auto">
    ...
  </div>
</div>

注意：Beta 2 中的特定列偏移

需要注意的是，特定列偏移（例如「offset-md-2」）將在Bootstrap 4 Beta 2中恢復。但是，“ml-auto”和“mx-auto”類別仍然可以用於靈活的列對齊和居中。

以上是Bootstrap 4 Beta 中的列偏移類別有何變化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！