如何在 Bootstrap 列之間新增邊距/填充而不破壞佈局？

如何在 Bootstrap 中新增列之間的邊距/填滿空間？

使用 Bootstrap 設計網站時，通常需要在列之間添加額外的邊距或填充空間。在嘗試實現此目標時，一些用戶遇到了不令人滿意的結果。

一種流行的方法是將列類別修改為帶有 pull-left 或 pull-right 的 col-md-5。然而，這種方法可能會產生太大的間隙。

更有效的解決方案是在原始 col-md-6 類別中嵌套一個 div。然後可以使用所需的邊距和填滿來設計該 div 的樣式。

這是一個範例：

<code class="html"><div class="row">
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 2</div>
    </div>
</div></code>

<code class="css">.classWithPad {
    margin: 10px;
    padding: 10px;
}</code>

透過使用此方法，您可以輕鬆新增所需的邊距和填充空間列之間不影響列佈局。這種技術提供了靈活性，並允許精確控制元素之間的間距。

以上是如何在 Bootstrap 列之間新增邊距/填充而不破壞佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！