Для одного из блоков на странице в bootstrap нужно убрать класс для мобильных телефонов (тип экрана xs), но разметку нужно оставить. Можно ли как то это сделать (желательно средствами самого bootstrap, без написания css кода)?
1 ответ
Убрать класс средствами бутстрапа - нельзя. Можно либо обнулять стили класса при @media
в CSS, либо убирать класс с помощью javascript.
Стилями - можно сделать так:
# your-styles.scss
.block.your-class {
# ваши стили для блока с классом
@media(max-width: $screen-xs-max) {
# стили, обнуляющие стили для блока с классом
}
}
Где $screen-xs-max
- SASS-переменная бутстрапа, в ней хранится ширина xs-экранов.
Если вы пишете стили в CSS - значения переменных можно взять здесь, и построить стили так:
# your-styles.css
.block.your-class {
# ваши стили для блока с классом
}
@media(max-width: 767px) {
.block.your-class {
# стили, обнуляющие стили для блока с классом
}
}
С помощью javascript, так:
$(document).ready(function() {
var $block = $('.your-block');
if ($block.length) {
$(window).resize(function() {
if ($('.device-xs').is(':visible')) {
$block.removeClass('your-class');
} else {
$block.addClass('your-class');
}
});
}
});
При ресайзе окна - проверяем, виден ли особый блок .device-xs
, и если виден - класс у блока убираем, иначе - добавляем.
Чтобы код работал - в верстке нужно разместить этот особый блок (можно сразу все бутстраповские):
<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>
Глядя на все эти
device-xx
блоки и хитрости с:visible
можно задаться вопросом: "Почему я не могу просто сравнить ширину экрана с 767px прямо в javascript? Ответ - потому что в таком случае будут погрешности, как правило из-за ширины скролла на странице. Если нужно точное совпадение с @media-запросами бутстрапа - лучше решить это с помощью хитрости выше.
-
-
нет проблем, @media-запросы работают в CSS. А можете и через javascript решить. 13 ноя 2016 в 9:10