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

Posted 2023-03-06

【中文标题】如何在 Bootstrap 中保持三列之间的空间？

【英文标题】：How to keep space between three columns in Bootstrap?

【发布时间】：2015-07-22 15:56:32

【问题描述】：

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

基本上，我希望在页面上均匀分布并居中放置三列。但是，当我为所有三列设置 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 中，但这似乎对我不起作用。

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

【问题讨论】：

col-**-n 项目之间应该有空格。 col-**-n 类有 padding-left 和 padding-right 的默认集合，数量由 15px 固定。我可以看看你自己的 CSS 吗？

twitter bootstrap grid system. Spacing between columns的可能重复

【参考方案1】：

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

【参考方案2】：

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

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

【讨论】：

但是您可以通过以下代码看到它没有按照我想要的方式工作：bootply.com/uTaX6ASnHj 我的列具有不同的背景颜色，因此列本身是“可见的”。所以在上面的例子中，我想看到列之间的空白。

@Quiver 您应该将背景样式设置为列内的

就是这样！一个菜鸟的错误。感谢您的帮助！

【参考方案3】：

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

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

【讨论】：

这不会导致列偏离中心吗？如果您知道在包括偏移量的同时使它们居中的方法，请告诉我！我对这一切还是陌生的！

绝对会。您基本上需要在每一侧添加偏移量才能获得所需的效果。看到您的问题所指的影响远小于偏移量是必要的，因为我会说 shadi1024 的答案很适合您。

【参考方案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>

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

干杯

【讨论】：

他没有要求响应式间距，他说“就像 10-15px 左右，而不是强迫它们到另一行。”

而且，如果他想要响应式边距/内边距，他也可以将 15/10px 更改为 % :)

【参考方案5】：

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

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

【参考方案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-* 第一个和最后一个子级来解决一些问题

【参考方案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 将调整为它的父填充。