Warum werden Spalten in Foundation 6 nicht nebeneinander platziert?

Question

Wenn mein Bildschirm auf 1090 px oder im Tablet-Modus geht, sitzen die Spalten nicht nebeneinander (einer von ihnen wird nach unten geschoben und erzeugt einen weißen Zwischenraum dazwischen). Ich verwende Foundation 6 mit 12 Spalten, aber es funktioniert nicht auf mittelgroßen Bildschirmen. Es funktioniert, sobald es die Desktop-Größe groß ist.

.white-no-content { 
 
    background-color: #fff; 
 
    height: 0px; 
 
} 
 

 
.black-no-content { 
 
    background-color: #000; 
 
    height: 100px; 
 
} 
 

 
#left-about { 
 
    background-color: #e6e3e3; 
 
    height: 75px; 
 
}

<!-- back white sections --> 
 
<section class="row"> 
 
    <article class="columns medium-2 black-no-content"> 
 
    </article> 
 
    <article class="columns medium-10 white-no-content"> 
 
    </article> 
 
</section> 
 

 
<!-- about --> 
 
<section class="row"> 
 
    <article class="columns medium-2" id="left-about"> 
 
    </article> 
 
    <article class="columns medium-10 text-center"> 
 
     <div> 
 
      <a href="#fashion-about">ABOUT</a> 
 
     </div> 
 
    </article> 
 
</section>

Answer 1

ich kopiert und eingefügt Code in ein codepen und es funktioniert (die Spalten sind Seite an Seite selbst bei 1090px und höher): https://codepen.io/dgenest/pen/yXLNLq

1. Haben hast du das CSS der Foundation in deine Seite aufgenommen?

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css"> 
   

2. Der Standard Breakpoint für mittlere Bildschirme ist 640px. Wenn Ihr Bildschirm kleiner ist, sehen Sie den Stapel der Spalten.