Bootstrap:在列之间添加边距/填充空间 [英] Bootstrap: add margin/padding space between columns

问题描述

我正在尝试在 Bootstrap 网格布局的列之间添加一些额外的边距/填充空间.我试过这个，但我不喜欢结果.这是我的代码:

 
<div class="text-center col-md-6">小部件 1
<div class="text-center col-md-6">小部件 2

我想添加 margin: 10px 和 padding:10px.有些人建议将他们的类更改为 col-md-5 和 pull-left 和 pull-right，但它们之间的差距将是太大了.

解决方案

Bootstrap 5(2021 年更新)

Bootstrap 5 仍然包含用于填充的间距实用程序.然而，由于新的 RTL 支持左"和正确的"已更改为开始"和结束".例如 pl-2 现在是 ps-2.

• pl-* =>ps-* (padding-left)
• pr-* =>pe-* (padding-right)
• ml-* =>ms-* (margin-left)
• mr-* =>me-* (margin-right)

此外，Bootstrap 5 引入了可以使用的新网格装订线类调整列之间的间距.间隔设置在 row 上，而不是在行内的每个 col-* 上.例如，使用 g-0 表示列之间没有间距.

Bootstrap 5 列间距演示

---

引导程序 4(2018 年更新)

Bootstrap 4 具有间距实用程序，可以添加(或减去)空间(装订线)列之间更容易.不需要额外的 CSS.

<div class="text-center col-md-6"><div class="mr-2">小部件 1</div>
<div class="text-center col-md-6"><div class="ml-2">小部件 2</div>

您可以调整列内容的边距，使用 margin 实用程序，例如 ml-0 (margin-left:0), mr-0 (margin-right:0), mx-1 (.25rem 左右边距), 等等...

或者，您可以使用 padding 实用程序调整列上的填充(col-*)，例如如 pl-0 (padding-left:0), pr-0 (padding-right:0), px-2 (.50rem left & right padding) 等等...

Bootstrap 4 列间距演示

注意事项

• 更改 col-* 上的左边距/右边距会破坏网格.
• 更改 col-* 作品内容的左右边距.
• 更改 col-* 上的左/右填充也有效.

I'm trying to put some extra margin/padding space between columns on my Bootstrap grid layout. I've tried this but I don't like the result. Here is my code:

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

I want to add margin: 10px and padding:10px. Some people suggest to change their classes to col-md-5 with pull-left and pull-right, but the gap between them will be too large.

解决方案

Bootstrap 5 (Update 2021)

Bootstrap 5 has still includes spacing utilities for padding. However, because of new RTL support "left" and "right" have been changed to "start" and "end". For example pl-2 is now ps-2.

• pl-* => ps-* (padding-left)
• pr-* => pe-* (padding-right)
• ml-* => ms-* (margin-left)
• mr-* => me-* (margin-right)

Additionally, Bootstrap 5 introduces new grid gutter classes that can be used to adjust the spacing between columns. The guttter is set on the row instead of each col-* inside the row. For example, use g-0 for no spacing between columns.

Bootstrap 5 column spacing demo

---

Bootstrap 4 (Update 2018)

Bootstrap 4 has spacing utilities that make adding (or substracting) the space (gutter) between columns easier. Extra CSS isn't necessary.

<div class="row">
    <div class="text-center col-md-6">
        <div class="mr-2">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="ml-2">Widget 2</div>
    </div>
</div>

You can adjust margins on the column contents using the margin utils such as ml-0 (margin-left:0), mr-0 (margin-right:0), mx-1 (.25rem left & right margins), etc...

Or, you can adjust padding on the columns (col-*) using the padding utils such as pl-0 (padding-left:0), pr-0 (padding-right:0), px-2 (.50rem left & right padding), etc...

Bootstrap 4 Column Spacing Demo

Notes

• Changing the left/right margin(s) on col-* will break the grid.
• Change the left/right margin(s) on the content of col-* works.
• Change the left/right padding on the col-* also works.

这篇关于Bootstrap:在列之间添加边距/填充空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！