Question

首先，我的母语不是英语，我希望问题和描述清楚。很抱歉，如果不是这样的话。

问题：

我正在使用MDB框架，当我使用网格系统时，最后一列的宽度大于正文。我试着说：100％；在内容和每一列中（类：Nx）。

我该如何解决？

HTML：

<div class="Mycolumns">
    <div class="row">
        <div class="col-8 N1" style="background-image: url(Resources/img/1.jpg); background-repeat: no-repeat; background-size: cover;">

        </div>
        <div class="col-4 N2" style="background-image: url(Resources/img/Sin%20t%C3%ADtulo-1.jpg); background-repeat: no-repeat; background-size: cover;">

        </div>
        <div class="col-4 N3" style="background-image: url(Resources/img/3.jpg); background-repeat: no-repeat; background-size: cover;">

        </div>
        <div class="col-4 N4" style="background-image: url(Resources/img/4.jpg); background-repeat: no-repeat; background-size: cover;">

        </div>
        <div class="col-4 N5" style="background-image: url(Resources/img/5.jpg); background-repeat: no-repeat; background-size: cover;">

        </div>
    </div>
</div>

Css：

.N1, .N2{
height: 500px;
}

.N3, .N4, N5{
 height: 300px;
}

Answer 1

我刚刚遇到了同样的问题。这样做是将我的嵌套元素之一设置为width：100vw-视图宽度似乎是整个浏览器窗口包括滚动条，因此您实际上获得了“ 100％+滚动条宽度”，即您的宽度，这给了我15px左右的井喷。将元素的宽度更改为100％即可将其固定。

为什么网格系统的宽度大于实体的宽度？

1 个答案: