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

在Bootstrap 中新增列之間的間距

使用Bootstrap 的網格系統時，您可能會遇到需要在列之間添加間距的情況。預設情況下，這些列彼此相鄰放置。但是，您可以使用簡單的 Bootstrap 解決方案輕鬆實現列之間的間距。

巢狀列

要在列之間建立間距，您可以將每個列包裝在巢狀列中。例如，考慮以下程式碼：

<div class="row">
  <div class="col-md-6">
    <div class="col-md-12">
      Column 1 content
    </div>
  </div>
  <div class="col-md-6">
    <div class="col-md-12">
      Column 2 content
    </div>
  </div>
</div>

調整內部列的大小

透過以這種方式包裝列，Bootstrap 會自動為列分配約10px 的填充內柱的左側和右側。這會導致外部列之間出現可見的空間。

自訂空間

要調整列之間的空間量，您可以指定內部列的寬度列。例如，如果你想要100px 的空間，你可以將內部列改為：

<div class="col-md-12">
<p><strong>結論</strong></p>
<p>使用嵌套列技術，很容易加入Bootstrap中列之間的間距。當您想要強調特定元素或創建更具視覺吸引力的佈局時，這尤其有用。 </p>
</div>

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