如何在Bootstrap中设置边距？

Question

我正在尝试为我的div设置响应式设计，并且我还想保持左右边距在屏幕宽度不同的情况下都为5像素。我的问题是，我有5个div在一个父div中，我不确定如何设置网格。

这是我之前发表的类似问题的帖子。它没有考虑到子div。 如何设置响应式边距？ 例如：

<div class="container">
    <div class="row">
        <div class="col-md-2">
            //contents...
        </div>
        <div class="col-md-2">
            //contents...
        </div>
        <div class="col-md-2">
            //contents...
        </div>
        <div class="col-md-2">
            //contents...
        </div>
        <div class="col-md-2">
            //contents...
        </div>
    </div>
</div>

这将产生以下结果：

 -------------------------------------
|5px+ ----  ----  ----  ----  ---- 5px+
|      div    div   div  div   div 
|
|
|

我不确定如何在每个屏幕上保持5像素。有人可以帮我吗？

谢谢！

- FlyingCat

Answer 1

正如我在另一个答案中所提到的，您可以使用自定义类定义。在这种情况下，如果col的数量不符合12的要求，您可以这样做：

<div class="container-fluid">
    <div class="row margin">
        <div class="col-xs-12">
            //contents...
        </div>
        ..........
    </div>
</div>

.margin {
  padding:0 5px;
  }
@media (min-width:768px) {
  .margin > div {
    background:red;
    width:20%;
  }
}

请查看此 BootplyDemo

- DaniP

Answer 2

如果你在网格上使用边距，会让自己感到头疼。改用填充(padding)就不会影响网格了：

.container {
  padding-left: 5px;
  padding-right: 5px;
}

可以在任何列中添加填充，而不必担心它会破坏布局。

- austinthedeveloper