bootstrap col-xs macht Inhalte unsichtbar

Question

Lassen Sie mich zuerst dies sagen: Dies ist kein Duplikat von Bootstrap col-sm making content disappear. Ich habe überprüft, ob ich eine rows verpasst habe, aber das ist in Ordnung.

Nachdem ich das gesagt habe, benutze ich einen Bootstrap mit 24 Spalten, und das Hinzufügen einer beliebigen col-xs Klasse macht meinen Inhalt unsichtbar. Ich kann die Bilder und Knöpfe auf Feuerwanzen sehen, aber sie sind nicht auf dem Geröll sichtbar. Durch das Deaktivieren von float:left für die Spaltenklasse wird der Inhalt wieder sichtbar. Ich habe mit Firefox, Chrome und MS Edge überprüft und habe das gleiche Ergebnis. HTML für den Block, der betroffen ist:

<div class="container"> 
    <section id="content-promoted"> 
     <div class="row"> 
      <div class="col-sm-24"> 
       <h2>Originals</h2> 
      </div> 
     </div> 
     <div class="row bg-dark p-tb-sm"> 
      <!--start looping--> 
      <div class="col-md-6 col-xs-10"> 
       <div class="block"> 
        <img src="{{ asset('bundles/web/images/p-1.png') }}" class="img-responsive"> 
        <div class="block-content p-a-sm"> 
         <h4 class="name">Name</h4> 
         <p class="artist">Artists</p> 
         <div class="block-meta"> 
          <button class="btn btn-clear"><i class="icon-clock"></i> Watch Later</button> 
          <button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button> 
          <button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button> 
         </div> 
        </div> 
       </div> 
      </div> 
      <!--end looping--> 
      <div class="col-md-6 col-xs-10"> 
       <div class="block"> 
        <img src="{{ asset('bundles/web/images/p-1.png') }}" class="img-responsive"> 
        <div class="block-content p-a-sm"> 
         <h4 class="name">NAme</h4> 
         <p class="artist">artists</p> 
         <div class="block-meta"> 
          <button class="btn btn-clear"><i class="icon-clock"></i> Watch Later</button> 
          <button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button> 
          <button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-6 landscape"> 
       <div class="block"> 
        <img src="{{ asset('bundles/web/images/p-2.jpg') }}" class="img-responsive"> 
        <div class="block-content p-lr-sm p-tb-xs"> 
         <h4 class="name">name</h4> 
         <p class="artist">artists</p> 
         <div class="block-meta"> 
          <button class="btn btn-clear"><i class="icon-clock"></i> Watch Later</button> 
          <button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button> 
          <button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button> 
         </div> 
        </div> 
       </div> 
       <div class="block"> 
        <img src="{{ asset('bundles/web/images/p-2.jpg') }}" class="img-responsive"> 
        <div class="block-content p-lr-sm p-tb-xs"> 
         <h4 class="name">Name</h4> 
         <p class="artist">artists</p> 
         <div class="block-meta"> 
          <button class="btn btn-clear"><i class="icon-clock"></i> Watch Later</button> 
          <button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button> 
          <button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-6 landscape"> 
       <div class="block"> 
        <img src="{{ asset('bundles/web/images/p-3.jpg') }}" class="img-responsive"> 
        <div class="block-content p-lr-sm"> 
         <h4 class="name">name</h4> 
         <p class="artist">artists</p> 
         <div class="block-meta"> 
          <button class="btn btn-clear"><i class="icon-clock"></i> Watch Later</button> 
          <button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button> 
          <button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button> 
         </div> 
        </div> 
       </div> 
       <div class="block"> 
        <img src="{{ asset('bundles/web/images/p-3.jpg') }}" class="img-responsive"> 
        <div class="block-content p-lr-sm"> 
         <h4 class="name">name</h4> 
         <p class="artist">artists</p> 
         <div class="block-meta"> 
          <button class="btn btn-clear"><i class="icon-clock"></i> Watch Later</button> 
          <button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button> 
          <button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button> 
         </div> 
        </div> 
       </div> 
       <div class="block"> 
        <img src="{{ asset('bundles/web/images/p-3.jpg') }}" class="img-responsive"> 
        <div class="block-content p-lr-sm"> 
         <h4 class="name">name</h4> 
         <p class="artist">artists</p> 
         <div class="block-meta"> 
          <button class="btn btn-clear"><i class="icon-clock"></i> Watch Later</button> 
          <button class="btn btn-clear"><i class="icon-heart"></i> 15,24,000</button> 
          <button class="btn btn-clear"><i class="icon-eye"></i> 99,99,999</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 
    <section id="content-carousels"> 
     <div class="row"> 
      <!--this is the looped div--> 
      <div class="col-sm-24">carousel</div> 
     </div> 
    </section> 
    <!--container end--> 
</div> 

und CSS:

.block{background: black;} 
.landscape .block{margin-top: 10px;} 
.landscape .block:first-child{margin-top:0;} 
.block img{border-bottom: 2px solid #00adef; } 
.block-meta{border-top:1px solid #151515;} 
    .block .btn-clear{background: none;border:none; margin: 0;padding: 0; border-radius: 0;text-align:left; font-size: 12px;} 

detaillierte Code ist hier in diesem codepen: http://codepen.io/samia92/pen/RRJEmB. Verkleinere das Fenster, um eine extra kleine Auflösung auszulösen und die ersten beiden Blöcke verschwinden!

Answer 1

Das Problem ist, dass Sie in Ihrem Code keine Rasterklassen Bootstrap in den letzten 2 Spalten für xs Bildschirme haben. Als Ergebnis werden auf dem extra-kleinen Bildschirm zuerst zwei Spalten verschoben, während der Rest von zwei nicht schwebt und die ersten zwei Spalten überlagert.

Ihre Codestruktur sollte wie folgt sein:

<div class="row bg-dark p-tb-sm"> 
    <div class="col-md-6 col-xs-10"></div> 
    <div class="col-md-6 col-xs-10"></div> 
    <div class="col-md-6 landscape col-xs-10"></div> 
    <div class="col-md-6 landscape col-xs-10"></div> 
</div> 

Answer 2

Sie sollten Raster von 12 machen, wenn Sie nicht zu, was wollen

in Grossansicht verkorkste Sie haben

col-sm-6 + col-sm-6 

aber in xs Ansicht haben Sie col-xs-10 + col-xs-10, so dass es versaut ist.