Как узнать, какой класс будет применяться в Bootstrap

Question

У меня есть тег div, как показано ниже.

<div class="col-xs-5 col-md-2 col-lg-1"></div> 

С текущего разрешения оконного/устройства, как бы я знать, если он будет применять либо col-xs-5 или col-md-2 или col-lg-1.

Причина этого вопроса заключается в том, что я должен запросить количество элементов на сервере. Если загрузочный бокс применяется col-xs-5, я попрошу 10 предметов. В противном случае 20 предметов, 30 предметов соответственно.

Есть ли способ узнать, какой класс будет применяться к моему тегу DIV?

Answer 1

вам нужно взглянуть на информацию нашли на их сайте http://getbootstrap.com/css/#grid

но то, что происходит, что, когда DIV имеет <div class="col-xs-5 col-md-2 col-lg-1"></div> эти имена классов он будет применять их в зависимости от размера экрана. bootstrap работает в 12-ти колонной сетке, поэтому, если вы используете col-xs-5, тогда он будет заполнять только 5 из этих столбцов, когда ширина экрана равна xs (mobile), а затем, когда экран попадает на экран среднего размера, он будет только заполните 2 из этих столбцов, если вы используете col-md-2.

Это фактически не изменяет ничего в вашем html, просто изменяя его размер.

Например, есть способ скрыть все в пределах div при определенном размере экрана. поэтому, если вы хотите скрыть все на размер экрана xs, тогда вы будете использовать класс div, называемый hidden-xs, который фактически не удаляет то, что у вас есть на экране, но, как и его имя, он «скрывает» его.

кстати размеры экрана для каждого класса следующим образом:

Дополнительных небольших устройства Телефонов (< 768px)

Малых устройств таблетки (≥768px)

Средних устройств Desktops (≥992px)

Большие устройства Desktops (≥1200px)

Answer 2

Bootstrap позволит вам style контент по-разному основан на ширине устройства, но если вы хотите загрузить другой/более/менее контент, вы можете определить ширину с помощью jQuery. Наверное, лучше использовать те же точки останова, что и Bootstrap, чтобы поддерживать согласованность. Потом как-то загрузить содержимое, которое требуется на основе, если утверждение, которое является истинным:

var width = $(window).width(); 

if (width < 767){ 
    // load your "xs" content 
} else if ((width >= 768) && (width < 991)) { 
    // load your "sm" content 
} else if ((width >= 992) && (width < 1200)){ 
    // load your "md" content 
} else { 
    // load your "lg" content 
} 

Это, как говорится, самозагрузки также позволяет show/hide в разных ширинах устройства, которые могли бы также решить вашу проблему, но совсем немного дополнительная разметка.