Ответственные правила css с использованием bootstrap

Question

Я бы хотел, чтобы некоторые части моего сайта уменьшали размер на мобильном устройстве. Возможно ли, чтобы эти изменения были вызваны загрузкой, вместо того, чтобы вручную добавлять отзывчивые правила CSS на основе ширины страницы?

Например, методом проб и ошибок я выяснил, что bootstrap3 переключается с фиксированной шириной до переменной ширины и разрушилась navbar всякий раз, когда ширина браузера меньше, чем 767px. Я хотел бы, чтобы некоторые другие элементы моей страницы были в стиле одновременно. Есть естественный/собственный способ, чтобы эти изменения срабатывающие/унаследованных от начальной загрузки реагирующих правил, вместо того, чтобы вручную добавлять

@media screen and (min-width: 767px) 

Answer 1

Лучший способ является включение классов начальной загрузки в вашем коде. Кроме того, используйте служебные классы для отображения и скрытия содержимого с помощью устройства. Они будут скрывать или показывать Div по адресу заданного размера экрана с этими классами:

.visible-phone 
.visible-tablet 
.visible-desktop 
.hidden-phone  
.hidden-tablet 
.hidden-desktop 

(телефоны 767px и ниже, таблетки 979px на 768px).

Update: На этой неделе ситуация изменилась, бутстрапирования новая версия имеет различные классы:

Старый = .Visible-телефон нового = .Visible-см

Старый = .Visible-планшет новый = .visible- мкр

Старого = .Visible-настольный новый = .Visible-Л.Г.

Старого = .hidden-телефон нового = .hidden-см

Старого = .hidden-таблетка новый = .hi DDEN-мкр

Старый = .hidden-рабочий стол новый = .hidden-Л.Г.

Более изменения легко просмотрены на the migration guide

Update: новые классы, начиная с «видимыми» устаревшими в пользу классы, которые регулируют свойство отображения CSS. См. bootstraps explanation