Html 留下空白的容器液体

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

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

将

溢出：隐藏

添加到容器中。

填充问题是调用类的结果。

col md

系列和

容器液体

都是用

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

用于组合每侧的

30px

填充。修复被剪裁内容的最简单方法是创建自己的类以包含

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

行

类负责

-15px

，其余部分将由上面的部分负责。这样，如果您再次选择使用

容器流体

，您将无法获得所有容器流体的相同结果

是对代码进行更新的工具。

模拟和使用引导“以内容为中心”布局的另一种方法

请点击此处：

保持

.container

以使文本内容位于视图的中心

---

添加一个新类，

my full width

到

您可以使用引导实用程序类
m-0
删除不需要的边距

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

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


。容器流体{
左侧填充：0rem；
填充权限：0rem；
溢出：隐藏；
}
我确实这样做了，但在调整大小时，会出现hoeizontal滚动条，并且由于负边距，一半内容不可见。请尝试在容器上不使用负边距，而是覆盖容器流体。容器流体{padding left:0；padding right:0；}但它会影响我的其余页面吗？如果您再次使用容器流体类。所以最好在主容器上放置另一个类。然后在你的css中。包装器{padding left:0；padding right:0；}我做了，但左右两侧仍然有一个空格。您能显示更多的代码吗？您提供的代码不会重新创建问题。这是我的代码。。我只在调整大小方面面临问题，我想实现这一点：所以本质上你不想让容器流体提供一点点填充
是的。我想做到这一点：。当我添加容器液体时，内容物位于适当的位置，但我只想扩展灰色背景谢谢。。但请看：在调整大小时，这会发生一些隐藏的内容，这只会发生在较小的分辨率上，还是一直都会发生？好的，检查fiddle链接-我更新了代码，以更好地响应您的需要。如果
max width:479px
的边距有点小，在获得所需结果之前，不要害羞地使用它。
<div class="container-fluid m-0">
    <div class="row" style="background-color:gainsboro">
        <div class="col-md-10">
        </div>
    </div>
</div>