Question

我正在使用bootstrap（3.3.4）构建我的第一个站点，而像“col-md-＃”这样的列在左侧和右侧有15px填充。

我可以用保证金替换这个填充而不会在以后遇到问题吗？

原因是我有许多带有彩色背景（彩色或图像）的盒子，并且带有填充物，当它们具有彩色背景时，盒子之间没有可见空间。我不明白为什么他们使用填充，我认为必须有一个很好的理由不使用margin（？）

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

Answer 2

更好的做法不来修改核心Bootstrap代码。

如果您的唯一问题是当列具有背景颜色时具有可见空间，则可以使用CSS3并使用background-clip: content-box;（在列上）将背景绘制区域限制为仅限内容框。浏览器support也不是很重要。

Answer 3

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

正如@ thibault-henry所解释的那样，你会想要在柱子内使用容器作为你的内容......

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

Answer 4

众所周知，盒子模型不包括div宽度的边距。所以边缘在div之外流血。

这就是原因，你无法替换填充：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链接以清楚了解它。

左侧和右侧的Bootstrap列填充 - 我可以使用保证金吗？

4 个答案: