如何在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

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

您的代码正常运行，请在此处查看： http ： //www.bootply.com/H6DQGdZxGy

Answer 2

这是一个迟到的答案，但我想有些人可以通过另一种解释来解释。 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 3

做你想做的'hacky'方法是给列一个与背景颜色相同的边框。

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

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

看看这个： twitter bootstrap网格系统。 列之间的间距

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将调整为它的父级填充。