Bootstrap:在列之间添加边距/填充空间

Question

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

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

我想添加margin: 10px和padding:10px.有人建议他们班改为col-md-5用pull-left和pull-right,但它们之间的差距会过大.

Answer 1

只需在col-md-6其中添加一个div ,就可以获得所需的额外填充.它col-md-6是保持列完整性的"主干",但您可以在其中添加额外的填充.

<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>

CSS

.classWithPad { margin:10px; padding:10px; }

Answer 2

更新2018年

Bootstrap 4现在具有间距实用程序,可以更轻松地添加(或减少)列之间的空间(装订线).额外的CSS不是必需的.

<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>

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

或者,可以调整在列填充用(同事*)填充 utils的如PL-0(填充左:0),PR-0(填充右:0),PX-2(左.50rem&正确填充)等...

Bootstrap 4列间距演示

笔记

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

Answer 3

我面临同样的问题; 以下对我来说效果很好.希望这有助于有人登陆:

<div class="row">
  <div class="col-md-6">
    <div class="col-md-12">
     Set room heater temperature
   </div>
 </div>
 <div class="col-md-6">
   <div class="col-md-12">
     Set room heater temperature
   </div>
 </div>
</div>

这将自动在2个div之间渲染一些空格.

Answer 4

只需添加“ justify-content-around”类。这会自动在2格之间增加差距。

文档：https : //getbootstrap.com/docs/4.1/layout/grid/#horizo​​ntal-alignment

样品：

<div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
</div>

Answer 5

您可以使用如下的填充和边距速记 Bootstrap 4 类：

对于超小型设备，即 xs

{property}{sides}-{size}

对于其他设备/视口（小、中、大和超大）

{property}{sides}-{breakpoint}-{size}

在哪里：

property = m for margin and p for padding

以下是边的速记含义：

l = defines the left-margin or left-padding
r = defines the right-margin or right-padding
t = defines the top-margin or top-padding
b = defines the bottom-margin or right-padding
x = For setting left and right padding and margins by the single call
y = For setting top and bottom margins
blank = margin and padding for all sides

断点 = sm、md、lg 和 xl。

综合以上，左填充完整代码可以是（例如）：

用于超小型设备中的左填充

pl-2

或用于中型到超大型

pl-md-2