Question

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

    <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是＆＃39;骨干＆＃39;保持列的完整性，但您可以在其中添加额外的填充。

<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 现在有spacing utilities，可以更轻松地添加（或减少）列之间的空间（装订线）。 额外的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; right margin）等等......

或您可以使用 padding utils 调整列上的填充（col- *）如pl-0（padding-left：0），pr-0（padding-right：0），px-2（.50rem left＆amp; right padding）等......

Bootstrap 4 Column Spacing Demo

备注

更改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/#horizontal-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

对于较大的显示，我会在中间留一个额外的列，并且当列在较小的显示器上折叠时重置为默认值。像这样：

    <div class="row">
        <div class="text-center col-md-5 col-sm-6">
            Widget 1
        </div>
        <div class="col-md-2">
            <!-- Gap between columns -->
        </div>
        <div class="text-center col-md-5 col-sm-6">
            Widget 2
        </div>
    </div>

Answer 6

使用flexbox非常容易。通过将列更改为master

为空间留出空间

col-md-5

CSS

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

Answer 7

试试这个：

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

Answer 8

在其他方面，如果你想删除列之间的双填充，只需在行内添加类“nogap”

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

为它创建额外的css类

.nogap > .col{ padding-left:7.5px; padding-right: 7.5px}
.nogap > .col:first-child{ padding-left: 15px; }
.nogap > .col:last-child{ padding-right: 15px; }

多数民众赞成，请点击此处：https://codepen.io/michal-lukasik/pen/xXvoYJ

Answer 9

对于那些希望控制动态列数之间的间距的人，请尝试：

<div class="row no-gutters">
    <div class="col">
        <div class="inner">
            <!-- content here -->
        </div>
    </div>
    <div class="col">
        <div class="inner">
            <!-- content here -->
        </div>
    </div>
    <!-- etc. -->
</div>

CSS：

.col:not(:last-child) .inner {
  margin: 2px; // Or whatever you want your spacing to be
}

Answer 10

您可以如下使用padding和margin速记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

Answer 11

我遇到了同样的问题，并通过将一个div嵌套在bootstrap col中并添加填充来解决了。像这样：

<div class="container">
 <div class="row">
  <div class="col-md-4">
   <div class="custom-box">Your content with padding</div>
  </div>
  <div class="col-md-4">
   <div class="custom-box">Your content with padding</div>
  </div>
  <div class="col-md-4">
   <div class="custom-box">Your content with padding</div>
  </div>
 </div>
</div>

Answer 12

当细胞有背景色时为像我这样的人提供解决方案

HTML

<div class="row">
        <div class="col-6 cssBox">
            a<br />ba<br />ba<br />b
        </div>
        <div class="col-6 cssBox">
            a<br />b
        </div>
</div>

CSS

.cssBox {
  background-color: red;
  margin: 0 10px;
  flex-basis: calc(50% - 20px);
}

Answer 13

试试这个：

<div class="row">
      <div class="col-md-5">
         Set room heater temperature
     </div>
     <div class="col-md-2"></div>
     <div class="col-md-5">
         Set room heater temperature
     </div>
</div>

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

13 个答案: