如何新增 Bootstrap 列之間的間距？

如何在 Bootstrap 列之間引入間距

在 Bootstrap 中，定義列可以輕鬆對齊和內容分佈。但是，預設的列對齊方式直接並列列，消耗了整個可用空間。在列之間引入足夠的間距可以增強可讀性和視覺吸引力。

要在列之間引入間距，您可以在每個 col-md-6 列中嵌套一個額外的 col-md-12 列。這將建立一個容器，有效地在外部列之間新增間隙。

範例程式碼：

<div class="row">
  <div class="col-md-6">
    <div class="col-md-12">
      Some Content...
    </div>
  </div>
  <div class="col-md-6">
    <div class="col-md-12">
      Some Second Content...
    </div>
  </div>
</div>

此程式碼結構確保外部col-md-6列具有巢狀的col-md-12 列，它們之間引入了空格。 col-md-12 列有效地建立了一個間隙，同時保持了外部列內的原始寬度劃分。

輸出：

[帶有間距的輸出影像兩列之間]

透過實作此方法，您可以在不影響原始列大小的情況下自動新增列之間的間距。

以上是如何新增 Bootstrap 列之間的間距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！