bootstrap nicht nebeneinander mit fullpage.js

Question

Ich habe eine Webseite, wo ich bootstrap4 und fullpage.js, jetzt implementiert habe, wenn ich bootstrap col zu einem Abschnitten hinzufügen, bekomme ich den Abschnitt untereinander statt nebeneinander neben jedem andere.

das ist mein 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> 

meine fullpage.js Initialisierung

$('#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: Die div in schwarz und rot meine navbar ist und eine Z-Index größer als der Rest der Elemente im Körper.

Answer 1

Ich bin nicht sicher, wo das Problem war, aber ich war in der Lage sein, es zu beheben diesen Code mit

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

Was ich hier geändert wird, habe ich die Container-Flüssigkeit im Innern des Abschnitts div und anstelle von die Reihe Klasse in der Abteilung div Ich legte es in einem separaten div