bootstrap 与 fullpage.js 不相邻

Question

我有一个网页，我在其中实施了 bootstrap4 和 fullpage.js，现在，当我将 bootstrap col 添加到一个部分时，我得到的是一个部分在另一个部分下方，而不是彼此相邻。

这是我的html

<div class="container-fluid position-relative">
<div id="fullpage">
    <div class="row section homeClass" id="home">HomePage</div>
    <div class="row section productsClass" id="products">
        <div class="col-12 col-sm-6 col-md-8 left">.col-12 .col-sm-6 .col-md-8</div>
        <div class="col-6 col-md-4 right">.col-6 .col-md-4</div>
    </div>
    <div class="row section contactClass" id="contact">Contact</div>
    <div class="row" id="footer">Footer</div>
</div>

我的fullpage.js初始化

 $('#fullpage').fullpage({
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke']
        /*Adding function to display the current nav-item using afterLoad Callback -> fullPage.js*/

    , afterLoad: function (anchorLink, index) {
        var loadedSection = $(this);
        if (index == 1) {
            $('.selectedMenu').remove();
            $(".navbar-brand").after(" <ul class=\"navbar-nav\"><li class=\"nav-item active selectedMenu animated fadeInRight\"> <a class=\"nav-link\" href=\"#\">" + "Home" + "<span class=\"sr-only\">(current)<\/span><\/a> <\/li><\/ul> ");
        }
        if (index == 2) {
            $('.selectedMenu').remove();
            $(".navbar-brand").after(" <ul class=\"navbar-nav\"><li class=\"nav-item active selectedMenu animated fadeInRight\"> <a class=\"nav-link\" href=\"#\">" + "Products" + "<span class=\"sr-only\">(current)<\/span><\/a> <\/li><\/ul> ");
        }
        if (index == 3) {
            $('.selectedMenu').remove();
            $(".navbar-brand").after(" <ul class=\"navbar-nav\"><li class=\"nav-item active selectedMenu animated fadeInRight\"> <a class=\"nav-link\" href=\"#\">" + "Contact" + "<span class=\"sr-only\">(current)<\/span><\/a> <\/li><\/ul> ");
        }
    }

});

PS：黑色和红色的 div 是我的导航栏，其 z-index 大于正文中的其他元素。

Answer 1

我不确定问题出在哪里，但我能够使用此代码修复它

      <div class="section productsClass" id="products">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
                <div class="col-6 col-md-4">.col-6 .col-md-4</div>
            </div>
        </div>
    </div>

我在这里更改的是我将容器流体放在 div 部分内，而不是将行 class 放在 div 部分内，我将它放在一个单独的 div

bootstrap 与 fullpage.js 不相邻

bootstrap not next to each other with fullpage.js

javascript

jquery

css

twitter-bootstrap

fullpage.js