bootstrap不是紧挨着，与fullpage.js

我有一个网页，我已经实现了bootstrap4和fullpage.js，现在，当我将bootstrap col添加到某个部分时，我将第一部分替换为下一部分其他。bootstrap不是紧挨着，与fullpage.js

这是我的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：黑色和红色的格是我的导航栏，并具有z-index大于正文中其余元素。

来源

2017-02-22 Rehan

我不知道问题出在哪里了，但我能够使用此代码

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

来源

2017-02-22 17:43:59

这非常简单，我在过去的2个小时里突然想到了。只将“行”放在部分的内部。这是在'fullpage.js'的文档中给出的吗？ – Rehan

@ this.Believer我不确定它是否在fullpage.js的文档中。您是否尝试在网页浏览器中使用检查器工具？我使用了 –

。这不符合你的答案。感谢芽:) – Rehan

bootstrap不是紧挨着，与fullpage.js

回答

相关问题