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

How to keep space between three columns in Bootstrap?

提问by Quiver

I've done quite a bit of searching here on Stackoverflow on how to solve this problem efficiently, but I still haven't seemed to find exactly what I'm looking for.

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

Basically, I have three columns that I want evenly spaced and centered across my page. However, when I set col-md-4 for all three columns, the end result is they are all three bunched up to each other. How can I make it so that there is space between the columns? Like 10-15px or so without forcing them onto another row.

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

Here is some example code:

下面是一些示例代码：

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

Maybe I'm just doing something wrong but I cannot seem to figure out how to make this work. I've seen several people suggest to just put them into another div with some padding but that doesn't seem to work for me.

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

Thanks for any help! I'm open to all suggestions!

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

采纳答案by Shadi Namrouti

Actually, your code already creates spaces between columns, because in bootstrap the column has 15px padding from each side.

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

Your code is working normally, check here: http://www.bootply.com/H6DQGdZxGy

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

回答by Metal3d

It's a late answer but I guess that some people can be interessed by another explanation. Bootstrap "cols" system is not made to decorate but to place elements in pages. If you need to space column contents, you need to wrap your content:

这是一个迟到的答案，但我想有些人可能会对另一种解释感兴趣。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>

Then you can add spacing on ".col-spaced" by using padding

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

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

Note that:

注意：

• margin will change you column size because the col-* should be placed to respect column layout
• you may need to change col-* first and last child to fix some problem

• 边距会改变你的列大小，因为 col-* 应该被放置以尊重列布局
• 您可能需要更改 col-* first and last child 来解决一些问题

回答by dpedoneze

You can do something like:

您可以执行以下操作：

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

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

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

You might add a content to wrap it, otherwise you'll have those rules applied to all columns in your layout!

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

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

So then you can use:

那么你可以使用：

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

or you can create just a class like: spaced-coland then add a padding on it:

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

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

and then you apply this class on your cols

然后你在你的 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>

So you'll have your spacing as you want :)

因此，您将拥有自己想要的间距:)

Cheers

干杯

回答by Imran Niloy

If you use padding and change the background color, you may notice that the colors of the columns don't have much spacing between them. Perhaps a better option would be

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

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

回答by plushyObject

A 'hacky' way to do what you want is to give the columns a border that is the same color as the background.

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

回答by OscillatingMonkey

You have the option to use column offsetting col-md-offset-*. You wouldn't be able to maintain the spacing of your columns (reduce 4 to 3), but I believe it should somewhat do the job for responsive spacing.

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

Check this out: twitter bootstrap grid system. Spacing between columns

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

回答by Pablo

You can put another div to place your content inside the .col div, as the below example:

您可以将另一个 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>

See it working here: https://codepen.io/pmfeo/pen/RVxPXg

看到它在这里工作：https: //codepen.io/pmfeo/pen/RVxPXg

That div will adjust to it's parent padding.

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