bootstrap col-xs使內容不可見

Question

讓我先說：這不是Bootstrap col-sm making content disappear的重複。我檢查過是否有錯，但這些都沒有問題。

說了這樣的話，我使用了24列引導程序，並且添加了任何col-xs類都使得我的內容不可見。我可以看到螢火蟲上的圖像和按鈕，但它們在碎石上不可見。在列類上禁用float:left會使內容再次顯示。我已經使用firefox，chrome和MS Edge進行了檢查，並得到了相同的結果。 HTML的塊受到影響：

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

和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;} 

詳細的代碼是在這裏在這個codepen：http://codepen.io/samia92/pen/RRJEmB。調整窗口大小以觸發「超小分辨率，前兩個塊消失！

Answer 1

問題是，在您的代碼中，屏幕的最後2列上沒有任何引導程序的網格類。因此，在超小屏幕上的結果是前兩列正在漂浮，而其餘兩列沒有漂浮並覆蓋在前兩列。

你的代碼結構應該是這樣的：

<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

你應該把12的網格，如果你不想在大視圖搞砸

的事情你有

col-sm-6 + col-sm-6 

但在xs查看你有col-xs-10 + col-xs-10，所以它被搞砸了。