bootstrap 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:使用bootstrap 4

Answer 1

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

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

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

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

bootstrap fullpage.js 中的填充问题

padding issue in bootstrap with fullpage.js

html

css

twitter-bootstrap

fullpage.js