左侧和右侧的引导列填充 - 我可以使用边距吗？答案

【问题标题】：Bootstrap columns padding on left and right - can i use margin instead?左侧和右侧的引导列填充 - 我可以使用边距吗？
【发布时间】：2016-04-06 21:09:11
【问题描述】：

我正在使用引导程序 (3.3.4) 构建我的第一个站点，并且诸如“col-md-#”之类的列在左侧和右侧都有 15 像素的填充。

我可以用边距替换这个填充，以后不会出现问题吗？

原因是我有许多带有彩色背景（颜色或图像）的框，并且当它们具有彩色背景时，我在框之间没有可见空间。我不明白他们为什么使用填充，我认为必须有充分的理由不使用边距（？）

【问题讨论】：

*.com/questions/5958699/…

标签： html css twitter-bootstrap

【解决方案1】：

因为 col-* 仅用于构建网格。那么，如果您想个性化网格中的内容，则必须在其中添加一个新块，并使用此块而不是网格。

<div class="row">
    <div class="col-sm-6">
        <div class="greenBlock"></div>
    </div>
    <div class="col-sm-6">
        <div class="yellowBlock"></div>
    </div>
</div>

代替

<div class="row">
    <div class="col-sm-6 greenBlock"></div>
    <div class="col-sm-6 yellowBlock"></div>
</div>

【讨论】：

【解决方案2】：

最好不要修改核心引导代码。

如果您只关心列具有背景颜色时的可见空间，您可以使用CSS3 并使用background-clip: content-box;（在列上）将背景绘画区域限制为仅内容框。浏览器support 也不是什么大问题。

【讨论】：

我认为这是迄今为止对我来说最好的解决方案，因为我不喜欢使用太多的 DIV。

【解决方案3】：

我们知道，box-model 不将边距包含在 div 的宽度中。所以边距在 div 外流血。

这就是原因，您不能将 padding:15px 替换为边距。默认情况下，Bootstrap 使用以下 box-model css 属性。

box-sizing:border-box;

但如果你想在两个盒子之间留出空间，那么有一种方法。

用 col-xs-12 包裹子 div 并为其添加背景颜色。

.a {
    background-color: yellow;
}

.b {
    background-color: red;
}

.c {
    background-color: green;
}

<div class="row">
<div class="col-xs-12 a">
    
    <div class="col-xs-6 ">
        <div class="col-xs-12 b">
        Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World 
    </div></div>
    <div class="col-xs-6 ">
        <div class="col-xs-12 c">
        Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
    </div></div>
</div>
</div>

检查我的JSFIDDLE 链接以清楚地理解它。

【讨论】：

【解决方案4】：

查看有关 Bootstrap 网格的这篇有用的文章，这将有助于解释为什么将填充用于装订线： http://blog.codeply.com/2016/04/06/how-the-bootstrap-grid-really-works

正如@thibault-henry 解释的那样，您需要在列中使用一个容器来存放您的内容...

示例：http://codeply.com/go/BCmjjlnrg0

【讨论】：