如何微調 Bootstrap 網格列的間距？

微調 Bootstrap 網格間距

在 Bootstrap 網格佈局中，您面臨著列間距的挑戰。雖然使用 col-md-5 與左拉和右拉的解決方案可能會導致空間過多，但可以使用更細緻的方法。

解決方案：在列嵌套Div

在每個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>

CSS：

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

您可以輕鬆使用此解決方案，您可以輕鬆地為列新增所需的間距，而無需犧牲網格佈局的結構一致性。

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