bootstrap col-xs делает контент невидимым

Question

Позвольте мне сначала сказать следующее: это не дубликат Bootstrap col-sm making content disappear. Я проверил, не пропустил ли я rows, но все в порядке.

Сказав это, я использую 24 столбца бутстрапа, и добавление любого класса col-xs делает мой контент невидимым. Я вижу изображения и кнопки на Firebug, но они не видны на scree. отключение 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

Проблема в том, что в вашем коде у вас нет классов сетки Bootstrap на последних 2 столбцах для экранов xs. Таким образом, в результате на маленьком экране первые два столбца плавают, а остальные два не плавают и не накладываются на первые два столбца.

Ваша структура кода должна выглядеть так:

<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 view у вас есть col-xs-10 + col-xs-10, поэтому он перепутался.