如何保持Bootstrap中三列之间的空间？ [英] How to keep space between three columns in Bootstrap?

问题描述

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

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.

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

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.

以下是一些示例代码：

<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，但这对我来说似乎不起作用。

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.

感谢您的帮助！我对所有建议都很开放！

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

推荐答案

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

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

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

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

这篇关于如何保持Bootstrap中三列之间的空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！