Javascript 引导与fullpage.js不相邻

我有一个网页，我已经实现了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>

主页
.col-12.col-sm-6.col-md-8
.col-6.col-md-4
接触
页脚

my 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> ");
        }
    }

});

$（'fullpage'）。整页({
章节颜色：['f2f2f2'、'4BBFC3'、'7BAABE'、'whitesmoke']
/*使用afterLoad Callback->fullPage.js添加显示当前导航项目的函数*/
，后加载：功能（锚点链接，索引）{
var loadedSection=$（此）；
如果（索引==1）{
$（'.selectedMenu'）.remove（）；
$（“.navbar brand”）。在（“

注：黑色和红色的div是我的导航条，其z索引大于主体中的其他元素。
我不确定问题出在哪里，但我能够使用此代码修复它

      <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>


.col-12.col-sm-6.col-md-8
.col-6.col-md-4

我在这里改变的是，我把容器流体放在section div中，而不是把row类放在section div中，我把它放在一个单独的div中，这个div非常简单，在过去的2个小时里我一直在绞尽脑汁。把
行
也放在section div中。这在
fullpage.js？@this.cresten我不确定它是否在fullpage.js的文档中。您是否尝试在webbrowser中使用inspector工具？我使用过。在您的回答的帮助下，它不起作用。谢谢，巴德：）