容器流体留空白

Question

我想使用全宽 div，因此添加了 container-fluid 类，在左侧和右侧留下空白空间。我使用左右负边距解决了它。但问题是负边距会影响引导响应的性质。当我调整大小时，左侧内容被隐藏，并且在调整大小时有一个水平滚动条。

<div class="container-fluid">
<div class="row" style="background-color:gainsboro">
 <div class="col-md-10">
 </div>
 </div>
 </div>

Answer 1

我在这个场景中所做的就是应用以下样式，没有填充或水平滚动条，也适用于小型设备。

.container-fluid{
  padding-left: 0rem;
  padding-right: 0rem;
  overflow: hidden;
}

Answer 2

您在填充方面遇到的问题是您所调用的类的结果。该col-md系列均container-fluid开箱即用

padding-left: 15px;
padding-right: 15px;

30px对于每侧组合的填充。修复被剪辑的内容的最简单方法是创建您自己的类来包含

.container-margin {
    margin-left: -15px;
    margin-right: -15px;
}

row带有 take care of 的类，-15px上面的类将处理其余的事情。这样，如果您选择container-fluid再次使用，您将不会得到所有这些的相同结果。

这是更新您的代码的小提琴。