Question

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

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

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

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

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%;
}

Answer 1

你基本上想要的是改变网格的“阴沟”。

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

如果您想要一个特定的功能，我建议不要使用您的网格。生成具有增加的装订线的备用网格可能有点过分，因此您可以滚动自己的CSS。如果您不想在Bootstrap网格中混合使用Flexbox，那么Flexbox非常有用且成功。

Answer 2

结束将重复内容包装在另一个div中，并且仅将填充物保留在外部。

在填充边缘里面的边界和背景，与Bootstrap专栏

2 个答案: