html - 由于列填充，container-fluid 和 row wrap 正在创建大于 100vh 的网页

Question

我的站点有一个部分，当我在 php 中排除该部分时，它会给我一个正常的无水平滚动站点。但如果我包含此部分，它会在网站上增加 20 像素的水平滚动。

<section id="options">
<div style="padding: 100px 0; background-color: white;">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-24">

这就是本节的开始，我使用 24 列编译版的 bootstrap，大多数列的左右填充均为 10px。但是容器和行不应该阻止它使网站超出其 100% 的宽度吗？我不想在我制作的每一个该死的 24 宽列中都添加无边距类......？

您可以在这里查看网站 http://120.147.163.197/myleisure.com.au/

因此 container-fluid 得到 10px 的填充:

.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 10px;
padding-right: 10px;
}

为什么行的边距为 -10px？

.row {
margin-left: -10px;
margin-right: -10px;
}

并且所有列都有 10px 的填充。

这个问题是从哪里产生的？

Answer 1

当您在行中嵌套行时，似乎会发生这种情况。注意到了。