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

Я использую Bootstrap 3 для веб-страницы, созданной с использованием PHP и HTML.

С чувствительной сеткой и классами в Bootstrap 3 вы можете назначить несколько классов для div для определения различной ширины в зависимости от текущего размера экрана – exmaple:

<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">...</div>

Это относится к размеру экрана, используя col-lg для больших устройств, col-md для средних устройств, col-sm для небольших устройств и col-xs x для дополнительных небольших устройств.
Он работает по назначению, но мне интересно, как я могу определить, какой из этих классов Bootstrap используется в данный момент, чтобы я мог показать текущую версию размера на экране.

Есть ли способ определить, какие из указанных выше параметров сетки / классов col в настоящее время активны с помощью PHP (или jQuery)? Я сам не мог найти подходящее решение для этого.

Большое спасибо заранее, Тим.

вот простой тест, который вы можете попробовать показать, какие классы bootstrap использует при повторной калибровке до определенного размера.

Ширина взята из текущего окна, а условия или размеры экрана – от BOOTSTRAP , не полагайтесь на это, поскольку это неточно, возможно, более или менее 3px.

Вы можете улучшить это по своему вкусу.

 $(document).ready(function(){ $(window).on('resize',function(){ var winWidth = $(window).width(); if(winWidth < 768 ){ console.log('Window Width: '+ winWidth + 'class used: col-xs'); }else if( winWidth <= 991){ console.log('Window Width: '+ winWidth + 'class used: col-sm'); }else if( winWidth <= 1199){ console.log('Window Width: '+ winWidth + 'class used: col-md'); }else{ console.log('Window Width: '+ winWidth + 'class used: col-lg'); } }); });

Лучший способ сделать это и даже не беспокоиться о том, может ли bootstrap изменить ширину устройства в будущем, – это добавить 4 divs к вашему телу и проверить, какой из них видим. Это работает в Bootstrap 3 и 4!

Ваш HTML будет выглядеть так (добавьте это где-нибудь в тело вашего документа):

 <div class='device-check visible-xs' data-device='xs'></div> <div class='device-check visible-sm' data-device='sm'></div> <div class='device-check visible-md' data-device='md'></div> <div class='device-check visible-lg' data-device='lg'></div>

вы можете найти текущий вариант сетки с:

 function get_current_grid_option(){ return $('.device-check:visible').attr('data-device') }

это вернет xs , sm , md или lg

Извлечение документа : http://getbootstrap.com/css/#grid

Мы иногда расширяем эти медиа-запросы, добавляя максимальную ширину для ограничения CSS для более узкого набора устройств.

копия

 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

Параметры сетки

Посмотрите, как аспекты сетки сетки Bootstrap работают на нескольких устройствах с помощью удобной таблицы.

Экстренные мелкие устройства Телефоны (<768px)
Маленькие устройства Таблетки (≥768px)
Средние устройства Настольные компьютеры (≥992px)
Крупные устройства Настольные компьютеры (≥1200px)

С помощью этого небольшого фрагмента вы можете видеть, что текущий тип устройства (Mobile, Tablet, Desktop, Large) напрямую добавляет верхнюю часть тела. Повеселись.

 var refreshDeviceInfo = function () { var id = 'deviceInfo', type = "Mobile", widthType = 'innerWidth', container = document.getElementById(id), width; if (!('innerWidth' in window )) { widthType = 'clientWidth'; window = document.documentElement || document.body; } width = window[widthType]; // check, if our info container is already in place, // if not prepend it to the body if (!container) { container = document.createElement('div'); container.setAttribute("id", id); container.setAttribute("style", "padding:20px; text-align:center; background:#eee"); document.body.insertBefore(container, document.body.firstChild); } if (width >= 1200) { type = "Large"; } else if (width >= 992) { type = "Desktop"; } else if (width >= 768) { type = "Tablet"; } container.innerHTML = type; }; // refresh on resize if ( window.addEventListener ) { window.addEventListener( "resize", refreshDeviceInfo, false ); } else if ( window.attachEvent ) { window.attachEvent( "onresize", refreshDeviceInfo ); } else { window["onresize"] = refreshDeviceInfo; } // initial refresh refreshDeviceInfo();

Изменен ответ от SunnyRed.

Отображение текущего макета Bootstrap 3

Не полагается на jQuery, как на принятый ответ.
Показывает информацию о расположении всегда в правом / нижнем углу окна над другим контентом.
Не изменяет сама страница.
Ожидается, что документ будет готов к первому исполнению, таким образом, с самого начала будет выдаваться правильный результат.

Добавьте это перед тегом вашего тела :

  <script> function refreshDeviceInfo() { var id = 'deviceInfo', type = "Mobile (xs)", widthType = 'innerWidth', container = document.getElementById(id), width; if (!('innerWidth' in window )) { widthType = 'clientWidth'; window = document.documentElement || document.body; } width = window[widthType]; if (!container) { container = document.createElement('div'); container.setAttribute("id", id); container.setAttribute("style", "position:fixed; right:0px; bottom: 0px; padding:10px; z-index:9999;background:rgba(0,255,0,0.6)"); document.body.insertBefore(container, document.body.firstChild); } if (width >= 1200) { type = "Large Desktop (lg)"; } else if (width >= 992) { type = "Medium Desktop (md)"; } else if (width >= 768) { type = "Tablet (sm)"; } container.innerHTML = type; }; // refresh on resize if ( window.addEventListener ) { window.addEventListener( "resize", refreshDeviceInfo, false ); } else if ( window.attachEvent ) { window.attachEvent( "onresize", refreshDeviceInfo ); } else { window["onresize"] = refreshDeviceInfo; } document.addEventListener("DOMContentLoaded", function(event) { refreshDeviceInfo(); }); </script>