html - 如何响应式设置 margin ？

Question

我正在尝试使用 bootstrap 设置一个 div。

我的问题是我需要在 div 的左右两侧设置边距。通过使用 col-md-10 并不能获得我需要的余量。如果屏幕很宽，它会超过 10px。

例如:

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

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

有没有人知道如何修复它？非常感谢!

Answer 1

据我了解，您始终希望每边的 margin 值为 10px。您可以创建自定义类并使用 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