使用 fullpage.js 在引导程序中填充问题

Question

我有一个网页，我已经实现了fullpage.js，但问题是padding-left 和padding-right 自动添加到container-fluid，如果我删除它，左边会有一些空格。只有当我在container-fluid 中添加rows 时才会出现此问题

html

<div class="container-fluid">
    <div id="fullpage">
        <div class="row section" id="home">HomePage</div>
        <div class="row section" id="products">Products</div>
        <div class="row section" id="pricing">Pricing</div>
        <div class="row section" id="contact">Contact</div>
    </div>
    <div id="footer">Footer</div>
</div>

PS：使用引导程序 4

Answer 1

.containers 旨在与 Bootstrap 中的.rows 一起工作。他们有一个聪明的系统，涉及边距和填充，它们相互抵消，但在所有设备上看起来都很好。

最简单的方法是将.container-fluid 放在#fullpage 中，而不是相反。

作为替代方案，如果由于各种原因，您不想（或不能）更改标记，您可以从 .row 转移负边距转至#fullpage:

#fullpage {
   margin-left: -15px;
   margin-right: -15px;
}
#fullpage>.row {
   margin-left: 0;
   margin-right: 0;
}