0

Для одного из блоков на странице в bootstrap нужно убрать класс для мобильных телефонов (тип экрана xs), но разметку нужно оставить. Можно ли как то это сделать (желательно средствами самого bootstrap, без написания css кода)?

1 ответ 1

4

Убрать класс средствами бутстрапа - нельзя. Можно либо обнулять стили класса при @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-запросами бутстрапа - лучше решить это с помощью хитрости выше.

2
  • у меня проект без scss
    – heff
    13 ноя 2016 в 9:02
  • нет проблем, @media-запросы работают в CSS. А можете и через javascript решить. 13 ноя 2016 в 9:10

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.