html - 为什么 Bootstrap 中的 .row 和 .container-fluid 会发生这种情况？

Question

感谢您查看我的问题:我正在尝试创建两个具有 .row 类的框，并且它们都在 .container-fluid 包装中。每当我这样做时，右边都会有一个奇怪的空间，我不知道这是否是 Bootstrap 添加的边距，但据我了解，.container-fluid 应该是全屏的？

两个盒子是黄色和白色，容器液体是粉红色/洋红色。

代码:

<div class="container-fluid">
 <div class="row" style="background-color: #EFF3CD; width:100%; height:350px;"></div>

 <div class="row" style="background-color: #FFF; width:100%; height:350px;"></div>
</div>

如果能深入了解为什么会发生这种情况，我们将不胜感激!

Answer 1

尝试从 .row 中删除您的 width: 100% 属性。 该类已经设置了左右边距，这看起来就是您遇到此问题的原因。如果您在浏览器的检查器中查看它，它应该会向您展示边距是如何在视觉上绘制的。