如何在 Bootstrap 中保持三列之间的空间？

Question

我在 Stackoverflow 上搜索了很多关于如何有效解决这个问题的方法，但我似乎仍然没有找到我正在寻找的东西。

基本上，我希望在页面上均匀分布并居中放置三列。但是，当我为所有三列设置 col-md-4 时，最终结果是它们都三个相互捆绑在一起。我怎样才能使列之间有空间？像 10-15px 左右而不强迫它们到另一行。

下面是一些示例代码：

<div class="row-fluid">
     <div class="col-md-4">
          <p>Stuff that fills this column</p>
     </div>
     <div class="col-md-4">
          <p>Stuff that fills this column</p>
     </div>
     <div class="col-md-4">
          <p>Stuff that fills this column</p>
     </div>
</div>

也许我只是做错了什么，但我似乎无法弄清楚如何做到这一点。我看到有几个人建议将它们放入另一个带有一些填充的 div 中，但这似乎对我不起作用。

感谢您的帮助！我愿意接受所有建议！

Answer 1

一种“hacky”的方式来做你想做的事是给列一个与背景颜色相同的边框。

Answer 2

实际上，您的代码已经在列之间创建了空格，因为在引导程序中，列的每一侧都有 15px 的填充。

您的代码运行正常，查看这里：http://www.bootply.com/H6DQGdZxGy

Answer 3

您可以选择使用列偏移 col-md-offset-*。您将无法保持列的间距（将 4 减少到 3），但我相信它应该在某种程度上完成响应间距的工作。

看看这个：twitter bootstrap grid system. Spacing between columns

Answer 4

你可以这样做：

[class*="col-"] {
  padding-right: 15px;
  padding-left: 15px;
}

[class*="col-"]:first-child {
  padding-left: 0px;
}

[class*="col-"]:last-child {
  padding-right: 0px;
}

您可以添加内容来包装它，否则您会将这些规则应用于布局中的所有列！

.spaced-columns [class*="col-"] {
  padding-right: 15px;
  padding-left: 15px;
}

那么你可以使用：

<div class="spaced-columns">
  <div class="col-md-4"> your content here</div>
  <div class="col-md-4"> your content here</div>
  <div class="col-md-4"> your content here</div>
</div>

或者您可以只创建一个类：spaced-col，然后在其上添加填充：

.spaced-col {
  padding: 0px 10px;
}

然后你在你的 cols 上应用这个类

<div class="col-md-4 spaced-col"> your content here</div>
<div class="col-md-4 spaced-col"> your content here</div>
<div class="col-md-4 spaced-col"> your content here</div>

因此，您将拥有所需的间距 :)

干杯

Answer 5

如果您使用填充并更改背景颜色，您可能会注意到列的颜色之间没有太大的间距。 也许更好的选择是

    .col-md-4 {
        margin-left: 5px;
    }

Answer 6

这是一个迟到的答案，但我想有些人可能会对另一种解释感兴趣。 Bootstrap“cols”系统不是用来装饰的，而是用来在页面中放置元素的。如果你需要空间列内容，你需要包装你的内容：

<div class="row-fluid">
 <div class="col-md-4">
   <div class="col-spaced">
      <p>Stuff that fills this column</p>
   </div>
 </div>
 <div class="col-md-4">
   <div class="col-spaced">
      <p>Stuff that fills this column</p>
   </div>
 </div>
 <div class="col-md-4">
    <div class="col-spaced">
      <p>Stuff that fills this column</p>
   </div>     
</div>

然后您可以使用填充在“.col-spaced”上添加间距

.col-spaced {
     margin-left: 15px
}

请注意：

• margin 会改变你的列大小，因为 col-* 应该被放置以尊重列布局
• 您可能需要更改 col-* 第一个和最后一个子级来解决一些问题

Answer 7

您可以将另一个 div 放置在 .col div 中，如下例所示：

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="content-wrapper" style="border:1px solid #000;">
        <p>Some content here</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="content-wrapper" style="border:1px solid #000;">
        <p>Some content here</p>
      </div>
     </div>
    <div class="col-md-4">
      <div class="content-wrapper" style="border:1px solid #000;">
        <p>Some content here</p>
      </div>
    </div>
  </div>
</div>

在这里查看它的工作原理：https://codepen.io/pmfeo/pen/RVxPXg

该 div 将调整为它的父填充。