如何响应设置保证金？答案

【问题标题】：How to setup margin responsively?如何响应设置保证金？
【发布时间】：2014-12-09 19:12:51
【问题描述】：

我正在尝试使用引导程序设置一个 div。

我的问题是我需要在 div 的左侧和右侧设置一个边距。通过使用 col-md-10 并没有得到我需要的利润。如果屏幕宽，则超过 10px。

例如：

<div class="col-md-offset-1 col-md-10">
    //contents...
</div>

 -------------------------------------
|  ---------    div   --------------
|10px margin              10px margin
|  |                               |
|  |                               |
|   -------------------------------
 -------------------------------------

有人知道如何解决它吗？非常感谢！

【问题讨论】：

在我看来，您需要包含其他尺寸的类，例如：xs、sm 和 lg。
我不确定，但如果你可以摆脱类、浮点数、宽度，只需在 div 上设置margin: 0 10px;，它默认会自动响应......为什么还要使用如果您要更改 div 上的所有默认样式，则默认引导 css...

标签： html css twitter-bootstrap

【解决方案1】：

如果我理解你总是希望每边都有一个 10px 的 margin 值。你可以创建一个自定义类并使用calc()，试试这个：

<div class="col-md-offset-1 col-md-10 margin">
    //contents...
</div>

.margin {
   margin:0 10px;
   width:calc(100% - 20px);
}

检查这个BootplyDemo

另一个选项可以是容器上的自定义类并使用padding。试试：

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

.margin {
  width:100%;
  padding:0 10px;
}

另一个BootplyDemo

【讨论】：

【解决方案2】：

您应该在主要内容 div 上使用 container-fluid 类。

<div class="container-fluid">
  <!-- Contents --> 
</div>

它的作用是创建一个全角容器，在左右、顶部和底部都有一些填充，可以根据浏览器的宽度响应地调整大小。

希望这会有所帮助！

【讨论】：