bootstrap col-xsはコンテンツを非表示にします

Question

私はこれを最初に言うことができます：これはBootstrap col-sm making content disappearの複製ではありません。私はrowsが見逃されているかどうか確認しましたが、それでも問題ありません。

私は24列のブートストラップを使用していますが、col-xsクラスを追加するとコンテンツが見えなくなります。私は火かき棒の上に画像とボタンを見ることができますが、それらは手のひらには見えません。列クラスのfloat:leftを無効にすると、コンテンツが再度表示されます。私はfirefox、chrome、MS Edgeを使ってチェックして、同じ結果を得ました。

<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：影響を受けているブロックのHTML

.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。ウィンドウをリサイズして ``超小型解像度をトリガし、最初の2つのブロックが消えます！

Answer 1

問題は、あなたのコードでは、xsスクリーンの最後の2列にブートストラップのグリッドクラスがないことです。その結果、最初の2つの列が浮動し、残りの2つが浮動しておらず、最初の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

あなたが

col-sm-6 + col-sm-6 

を持つ大規模なビューで

を台無しものにしたくない場合は、12のグリッドを作成する必要があります

だが、xsビューではcol-xs-10 + col-xs-10なので、それはうんざりしている。