填充边距内的边框和背景，带有 Bootstrap 列答案

【问题标题】：Border and background inside of padding margin, with Bootstrap columns填充边距内的边框和背景，带有 Bootstrap 列
【发布时间】：2016-02-18 20:30:00
【问题描述】：

我使用 Bootstrap 的网格系统设置重复行/列。我想在这些元素之间创建填充，但它们的边框和背景位于该填充内。我尝试过使用边距，但是在列级别上使用 Bootstrap 的网格布局。

下面是我正在使用的一个非常精简的版本，它说明了这一点。我想修改它，使蓝色边框拥抱白色内框，并且您看不到任何红色（在我的情况下，它会显示在文本后面）。我需要在不修改已经存在的基本 html 布局的情况下实现这一点，因此只依赖 CSS。

为了澄清我要做什么......我想在行和列之间添加填充。如果我只是直接将填充添加到外部 div（如下所示），则边框和背景颜色会延伸到该填充之外。我希望边框和背景颜色存在于我添加的填充边界内。

我尝试过使用各种盒子大小设置，以及我能想到的各种填充/边距，但均无济于事。

JSFiddle：https://jsfiddle.net/2v94yg2s/

HTML

<div class="container-fluid">
    <div class="grid-data row">
        <div class="col-md-4"><div></div></div>
        <div class="col-md-4"><div></div></div>
        <div class="col-md-4"><div></div></div>
        <div class="col-md-4"><div></div></div>
        <div class="col-md-4"><div></div></div>
        <div class="col-md-4"><div></div></div>
        <div class="col-md-4"><div></div></div>
    </div>
</div>

CSS

.grid-data {
  padding: 15px;
}

.grid-data  > div {
  padding: 15px;
  height: 50px;
  border: 1px solid blue;
  background-color: red;
}

.grid-data  > div > div {
  background-color: white;
  height: 100%;
  width: 100%;
}

【问题讨论】：

等等，你想让蓝色边框覆盖红色部分吗？那么有红色背景有什么意义呢？你能澄清一下吗？
@user1301428 我添加了一个澄清段
您是否尝试过使用box-sizing: border-box;？这将使边框出现在 inside div 而不是在它们之外（默认）

标签： html css twitter-bootstrap

【解决方案1】：

您基本上想要的是更改网格的“排水沟”。

如果您希望在您的网站中全局更改此设置，简单的解决方案是更改 Bootstrap 的“variables.less”文件中的 @grid-gutter-width 变量并重建您的 CSS。

如果您希望此功能用于某个特定功能，我建议您不要为此使用网格。生成一个增加间距的备用网格可能有点矫枉过正，所以你可以滚动你自己的 CSS。如果您不想在 Bootstrap 网格中混合使用 Flexbox，它会非常有用且成功。

【讨论】：

感谢@Webberig 的回复，由于一大堆废话（我正在开发另一个开发人员构建的大型应用程序，只处理几页并处理整个地方的一堆东西），我不能这样做。必须有一种方法来规定边框和背景进入填充内部，而无需采取如此激烈的措施，也不必修改 html 结构。
只需向包含元素添加一个额外的类，您就可以覆盖所有默认网格样式。无需重组，但这是维护的噩梦。为多列组件编写自己的 CSS 并不激烈...

【解决方案2】：

最终将重复的内容包装在另一个 div 中，并且只将填充保留在外部。

【讨论】：