使用 Bootstrap 3 在列之间添加边距答案

【问题标题】：Add margin between cols using Bootstrap 3使用 Bootstrap 3 在列之间添加边距
【发布时间】：2014-04-15 16:39:02
【问题描述】：

我在将 margin-right 应用到我的 article.col-sm-8 时遇到问题，因为如果将（例如）10px 添加到 margin-right，我的 side.col-sm-4 将放在文章下方，而我没有不想要这个，我要我旁边的文章。

我的 html 结构

<body>
<div id="wrapper">
    <section class="row">
        <article class="col-sm-8">

        </article>
        <aside class="col-sm-4">

        </aside>
    </section>
</div>
</body>

我的包装器最大宽度：1000px；

文章没有边距的布局

具有文章边距的布局

我想要这个，给文章添加边距

希望你能帮助我，问候！！

【问题讨论】：

标签： css twitter-bootstrap responsive-design twitter-bootstrap-3

【解决方案1】：

Bootstrap 3 使用填充而不是边距来创建列之间的间距（装订线），因此如果您在 aside div 中使用 div，您会看到装订线。

由于您希望它是10px，您可以在article 和aside 的两侧设置5px 的填充...

http://bootply.com/130020

【讨论】：

【解决方案2】：

我不是专家，但您可能想做的是download a customized version of bootstrap，您可以在其中更改@grid-gutter-width。这将允许您更改所有内容的边距。

您可以尝试覆盖这个 css，但我的猜测是，在所有 LESS 的东西中，它已经习惯于构建其他样式，并且在你知道它之前，你会希望你这样做了。

除此之外，我认为您会在网格系统以及使用所有列和添加边距时遇到问题。 100% + 3% 总是在下一行结束。

另一种选择可能是使用填充，这样您的网格系统的宽度保持不变，但您可以获得视觉距离。

【讨论】：