Bootstrap col-xs- * не работает должным образом

Question

Может кто-нибудь помочь мне выяснить, что происходит с моей мобильной версией моей страницы? Я изменяю пример панели инструментов с getbootstrap.com. Я хочу изменить мобильную версию одной из основных строк для отображения в виде строк по три div каждый.

   <div class="row placeholders"> 
        <div class="col-xs-4 col-sm-2 placeholder"> 
         <div class="circleText">3</div> 
         <h4>Active Users</h4> 
         <span class="text-muted">Total Active Users</span> 
        </div> 
        <div class="col-xs-4 col-sm-2 placeholder"> 
         <div class="circleText">3</div> 
         <h4>Items</h4> 
         <span class="text-muted">Items in Database</span> 
        </div> 
        <div class="col-xs-4 col-sm-2 placeholder"> 
         <div class="circleText">3</div> 
         <h4>Label</h4> 
         <span class="text-muted">Something else</span> 
        </div> 
        <div class="col-xs-4 col-sm-2 placeholder"> 
         <div class="circleText">3</div> 
         <h4>Label</h4> 
         <span class="text-muted">Something else</span> 
        </div> 
        <div class="col-xs-4 col-sm-2 placeholder"> 
         <div class="circleText">3</div> 
         <h4>Label</h4> 
         <span class="text-muted">Something else</span> 
        </div> 
        <div class="col-xs-4 col-sm-2 placeholder"> 
         <div class="circleText">3</div> 
         <h4>Label</h4> 
         <span class="text-muted">Something else</span> 
        </div> 
       </div> 

col-xs обычно в шаблоне col-xs-6, в общей сложности четыре столбца, который добавляет к 24. Таким образом, при просмотре на мобильном телефоне, он показывает два в каждой строке (с 24 разбивается на два ряда из 12). Странная часть заключается в том, что я изменил ее на col-xs-4 с шестью столбцами, которые я хочу показать на мобильных устройствах как две строки по три. Но когда я смотрю на мобильном телефоне, первая строка равна 3, но первый столбец второй строки попадает в третью строку сам по себе. Почему это происходит??

Answer 1

Это главным образом вызвано, если одна из колонн col-sm-4 имеет разную (большую) высоту, чем другие. Вы можете это исправить, добавив clearfix DIV между рядами или убедившись, что три колонки имеют одинаковый размер (высота-накрест)

Мое личное предложение, чтобы сделать это с помощью JavaScript. Вычислите максимальную высоту всех столбцов и присвойте эту высоту всем столбцам. Но если вам просто нужно решение css, вы можете рассмотреть возможность установки max-height для столбцов