Html 引导列在左侧和右侧填充-我可以改用边距吗?

Html 引导列在左侧和右侧填充-我可以改用边距吗?,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在用bootstrap(3.3.4)构建我的第一个站点,例如“col md-#”之类的列在左右两侧都有15px的填充 我可以用边距替换此填充,以后不会出现问题吗 原因是我有许多有彩色背景(颜色或图像)的框,当它们有彩色背景时,有填充的框之间没有可见的空间。我不明白他们为什么使用填充,我认为不使用边距(?)肯定有很好的理由,因为col-*仅用于构建网格。如果您想个性化网格中的内容,则必须在其中添加新块,并使用此块而不是网格 <div class="row"> <div

我正在用bootstrap(3.3.4)构建我的第一个站点,例如“col md-#”之类的列在左右两侧都有15px的填充

我可以用边距替换此填充,以后不会出现问题吗


原因是我有许多有彩色背景(颜色或图像)的框,当它们有彩色背景时,有填充的框之间没有可见的空间。我不明白他们为什么使用填充,我认为不使用边距(?)

肯定有很好的理由,因为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>

最好的做法是修改核心引导代码


如果您唯一关心的是在列具有背景颜色时有可见的空间,那么您可以利用并使用
背景剪辑:内容框(在列上)将背景绘制区域限制为仅限于内容框。浏览器也不是什么大问题。

在引导网格上查看这篇有用的文章,这将有助于解释为什么边沟使用填充:

正如@thibault henry所解释的,您需要在Columns中使用一个容器来存放您的内容


示例:

正如我们所知,长方体模型没有将边距包含在div的宽度中。因此边距会在div的外部出血

这就是原因,你不能用边距代替padding:15px。默认情况下,引导使用以下框模型css属性

框大小:边框框

但是如果你想在两个盒子之间留有空间,那么还有一个方法

用col-xs-12包装子div并向其添加背景色

.a{
背景颜色:黄色;
}
.b{
背景色:红色;
}
c{
背景颜色:绿色;
}

世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界
世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界

我认为这是目前为止对我来说最好的解决方案,因为我不喜欢使用太多的div。