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部分内，而不是在div部分中设置行类我将它放在一个单独的div中

bootstrap与fullpage.js并不紧挨着

1 个答案: