2017-02-22 16 views
0

У меня есть веб-страница, где у меня есть 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> "); 
     } 
    } 

}); 

this is my output

PS: ДИВ в черном и красном мой Navbar и имеет z-index больше остальных элементов в теле.

ответ

0

Я не уверен, где эта проблема была, но я был в состоянии исправить это с помощью этого кода

 <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

+0

, который был таким простым, и я ломал голову на 2 часа. также помещаем 'row' внутри раздела. это указано в документации «fullpage.js»? – Rehan

+0

@ this.Believer Я не уверен, что это в документации fullpage.js. Вы пытались использовать инструмент инспектора в веб-браузере? –

+0

Я использовал. Он не работает с помощью вашего ответа. Спасибо, бутон :) – Rehan