79

我试图在我的 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-5with pull-leftand pull-right，但它们之间的差距会太大。

4

15 回答 15

99

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; }
于 2014-04-10T13:32:03.690 回答
62

引导程序 5（2021 年更新）

Bootstrap 5 仍然包含用于填充的间距实用程序。但是，由于新的 RTL 支持，“左”和“右”已更改为“开始”和“结束”。比如pl-2现在ps-2。

  • pl-*=> ps-*（左填充）
  • pr-*=> pe-*（右填充）
  • ml-*=> ms-*（左边距）
  • mr-*=> me-*（右边距）

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

Bootstrap 5 列间距演示

引导程序 4（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>

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

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

Bootstrap 4 列间距演示

笔记

  • 更改左边距/右边距col-*会破坏网格。
  • col-*更改作品内容的左右边距 。
  • 更改左/右填充col-*也可以。
于 2018-02-21T18:03:54.310 回答
20

我面临同样的问题；以下对我来说效果很好。希望这有助于有人登陆这里：

<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 之间呈现一些空间。

于 2016-05-27T13:11:28.290 回答
10

只需添加“justify-content-around”类。这将自动增加 2 个 div 之间的差距。

文档： 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>
于 2018-11-16T14:54:59.210 回答
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

于 2018-12-20T15:50:03.233 回答
1

使用 flexbox 超级简单。通过将列更改为，为一些空间留出空间col-md-5 

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

CSS

.widgets {
    display: flex;
    justify-content: space-around;
}
于 2017-07-12T21:08:13.867 回答
1

当单元格获得背景颜色时，像我这样的人的解决方案

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);
}
于 2019-07-26T07:45:48.567 回答
1

我会在中间保留一个额外的列以用于更大的显示，并在列在较小的显示上折叠时重置为默认值。像这样的东西：

    <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>
于 2016-05-29T14:58:28.513 回答
1

尝试这个：

 <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>
于 2016-04-06T03:38:24.783 回答
0

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

<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
}
于 2018-09-18T16:23:28.843 回答
0

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

<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>
于 2019-03-14T07:44:46.553 回答
0

另一方面，如果您想删除列之间的双重填充，只需在行内添加类“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

于 2017-10-26T12:39:07.373 回答
0

我刚刚找到了一个适合我的解决方案，虽然它实际上并没有在盒子之间创建一个空间，所以可能不是你想要的。

边框边框-白色

实际上并没有创建空间，而是在列之间产生空间的效果。仅当您明显具有 bg-color 时才有效。

屏幕截图边框白色

于 2022-02-15T11:55:36.997 回答
-3

尝试这个：

<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>
于 2017-11-27T08:48:33.517 回答
-14

为了更好奇，我还发现添加

border: 5px solid white

或您喜欢的任何其他变体，使其融入其中，效果极佳。

于 2015-05-03T13:10:26.633 回答