Как в bootstrap 3 добавить класс для блока, если активный — sm или xs?

Question

[EVOSandru6]

Добрый день, мне нужно, чтобы если экран становится узким, то к блоку должен добавляться класс, которые сужает его, как это можно сделать средствами bootstrap 3?

Answer 1

[Абра Кадабра]

Ставите ширину блока, для определенной ширины экрана в процентах. Тогда он будет ресайзиться в соответствии с контейнером.

@media (max-width: 1000px /* Или столько, сколько вам нужно*/){
  .block{
      .width: 100%; /* Или столько, сколько вам нужно*/
   }
}

Если же дело касается картинки, то у бутстрап есть .img-responsive.

Comments

[EVOSandru6]

Спасибо большое!

Answer 2

[Вадим Белкин]

Изначально добавьте классы col-xs-*, col-sm-* и т.д. И каждый из них будет применять свои свойства на заданном ему экране. Почитайте и посмотрите примеры про сетку внимательнее.

Например если хотите на самых мелких экранах класс col-xs-12, на экранах от 768px - col-sm-6, а на экранах больше col-md-4, то вам нужно добавить их все элементу сразу, а не подставлять их скриптами при изменение размера экрана - так устроена сетка.

Comments

[EVOSandru6]

Насчет сетки все понятно просто, дело в другом, например есть big-class с настройками высоты, который я хочу воткнуть в блок именно на большом экране и есть any-class также с настройками высоты, который я хочу воткнуть на маленьком экране. Меня интресует, есть ли такие фишки в bootstrap? Что-то типа col-xs-some...?

[Вадим Белкин]

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

[EVOSandru6]

Через device width?

[Вадим Белкин]

Да, использую те же @ media Query или похожие параметры размеров экрана.

[EVOSandru6]

Спасибо большое!