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

回答

相關問題