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

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

您的代码正常运行，请点击此处：http://www.bootply.com/H6DQGdZxGy

Answer 2

这是一个迟到的答案，但我想有些人可以通过另一种解释来解释。 Bootstrap＆＃34; cols＆＃34;系统不是用来装饰，而是在页面中放置元素。如果您需要空格列内容，则需要包装内容：

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

然后你可以在＆＃34; .col-spaced＆＃34;上添加间距。通过使用填充

{{1}}

请注意：

margin将更改列大小，因为col- *应放置为尊重列布局
您可能需要更改col- *第一个和最后一个孩子以解决某些问题

Answer 3

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

检查出来：twitter bootstrap grid system. Spacing between columns

Answer 4

“hacky”方法可以为列提供与背景颜色相同的边框。

Answer 5

您可以执行以下操作：

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

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

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

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

6 个答案: