Мой общий вопрос: как можно условно добавить или удалить классы или идентификаторы в конкретный класс, используя только запросы css media? Например, в примерном коде, как я мог добавить "Class_B" ко всем div с "Class_A", когда @media all and (max-width: 1000px) and (min-width: 700px)?
<div class="Class_A"><div>
Мой конкретный случай: я использую Twitter Bootstrap v3.2.0. У меня есть заголовок с рядом кнопок в нем так:
<button class="btn navbar-btn">FooA</button>
<button class="btn navbar-btn">FooB</button>
<button class="btn navbar-btn">FooC</button>
Когда экран переходит от среднего (md) к small (sm), я хотел бы добавить класс "btn-sm" ко всем этим элементам. Как я могу сделать это наиболее эффективно/элегантно? (я бы предпочел не использовать JS или добавлять какие-либо дополнительные библиотеки, если это возможно)
Я понимаю, что я мог бы добавить произвольный класс ко всем тем кнопкам, как "btn-sm-duplicate", и определять его только тогда, когда браузер достигает определенной спецификации, такой как код ниже. Тем не менее, кажется уродливым создать дублирующий класс, когда он действительно не является... Можете ли вы предложить что-то?
@media all and (max-width: 1000px) and (min-width: 700px) {
btn-sm-duplicate{
::Copy/Paste all the attributes of btn-sm from bootstrap::
}
}
