Как в бутстрепе поймать текущий стиль колонки?

Question

[Paka]

Мне нужно добавить отступ только на разрешении меньше, чем col-sm-6
Можно ли эту ситуацию как-то поймать, чтобы заменить слили блока?
На большом разрешении у меня большие отступы, а на маленьком, я бы хотел применить другой стиль.

Answer 1

[lexnekr]

Можно написать свой стиль для всех классов с col-sm-6 и меньше. Но не забудьте про специфичность, иначе он не победит дефолтный.

Comments

[Paka]

Проблема в том, что все классы указаны явно, и они все применяются сразу.
Если бы при изменении разрешения добавлялся бы класс, допустим col-sm-6-active, но если разрешение не соответствует sm, то col-sm-6-active удалялся бы. Тогда можно было бы отдельно стилизовать элементы под разными разрешениями.

Или я чего-то не понял и такое уже есть?

[lexnekr]

Смотрите, Бутстрап используется media (дока htmlbook.ru/css/media), так что если у вас есть див с 2 классами col-sm-6 и col-lg-4, например, то для конкретного разрешения применяются только те стили, которые соответсвуют ему по media. Т.е. для больших экранов применятся только стили из класса col-lg-4, а для средних только col-sm-6.
Поэтому если вы добавите свой стиль для класса col-sm-6, то он только для средних и применится, большие не пострадают.

[Paka]

но тогда пострадают все элементы с классом col-xl-4, а мне нужно только для одного конкретного, или нет?

[lexnekr]

Paka: если стиль написать для col-sm-6, то "пострадают" все с col-sm-6 при соответствующих ему разрешениях.

Если нужно применить новый стиль только к 1, то ему действительно стоит добавить отдельный класс, например, col-sm-6-active и написать стиль именно для этого класса (а лучше для него + ещё что-то, чтобы специфичность была больше, чем у col-sm-6), но обязательно использовать media!
А в медиа указать для каких разрешений это делать.

[Paka]

Получилось! Хотя мозгами ещё не совсем дополнял ))
Добавил
media (min-width: 768px) {
.col-sm-6-active-test .event-list {
padding-left: 30px;
}
}
те. этот стиль срабатывает для всех больших разрешений

Answer 2

[Pavlo Barmak]

Responsive utilities(официальная документация)

Comments

[Paka]

Там только управление видимостью и свойством display, мне нужен явный указатель-класс на то какое в данный момент разрешение используется.

[Pavlo Barmak]

Там написано как нужно делать, как правильно. Если вам тупо нужен явный указатель - юзайте тулкит, но это говнокод.