Question

我正在尝试为我的div设置响应式设计，我也希望将左边距和右边距保持为5px，无论屏幕宽度如何。我遇到的问题是我在父div中有5个div，我不知道如何设置网格。

我以前针对类似问题的姿势。它不考虑儿童div。 How to setup margin responsively?

例如：

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

我不确定如何为每个屏幕保持5px。任何人都可以帮我吗？

谢谢！

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

Answer 2

如果你在网格上使用边距，你会很头疼。切换到填充，它不会影响网格：

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

可以将填充添加到任何列，而不必担心它会破坏。

如何在bootstrap中设置边距？

2 个答案: