0

Как можно в Bootstrap сделать так, чтобы при определенной ширине экрана элемент использовал правила одного из своих классов, а при другой - из другого?

В Bootstrap например, есть классы ширины колонок - col-xs, col-md, и т.д., при изменении размера экрана элементы используют класс с префиксом, соответствующим размеру - xs для телефонов, sm для планшетов и т.д.

4
  • Добавьте JavaScript. При изменении размера окна, меняйте все классы элементов с sm на xs, md на sm и так далее.
    – VisioN
    18 сен 2015 в 10:57
  • @VisioN, "При изменении размера окна, меняйте все классы элементов с sm на xs, md на sm и так далее." - Дак это и так автоматически работает в Bootstrap 18 сен 2015 в 10:59
  • Простите, что именно Bootstrap меняет автоматически? Классы всех элементов переписывает? Вы должны явно указывать разные классы для разной ширины сетки, т.е. col-md-3 col-sm-5 col-xs-7.
    – VisioN
    18 сен 2015 в 11:01
  • @VisioN, Я указываю с sm на xs, md на sm и так далее. Мне вот именно нужно добавлять свои отступы для каждого экрана, потому что, если писать col-xs-1 - двигает на слишком большой отступ для меня, а мне нужно меньше. В Bootstrap плохо что нельзя писать так: col-xs-0.5 18 сен 2015 в 11:04

3 ответа 3

2

Вы можете использовать @media запросы. Например, есть класс .test, Который мы хотим видеть только на телефоне. Тогда необходимо написать такие стили:

.test {
    display: none;
}
@media screen and (max-width: 480px) {
    .test {
        display: block;
    }
}
6
  • Ну и как вы хотите изменять классы элементов с помощью @media запросов? Ваш совет совершенно не подходит к данной ситуации.
    – VisioN
    18 сен 2015 в 10:59
  • @Rolandius Спасибо, хороший способ. Но есть ли другие варианты в Bootstrap? Что-то находил про less. 18 сен 2015 в 11:01
  • @VisioN, так как Bootstrap делает для большинства своих классов это автоматически, я понял этот вопрос так, как будто он относится к собственным классам.
    – Rolandius
    18 сен 2015 в 11:01
  • @Дмитрий, Bootstrap предполагает, что вы можете изменить переменные в их less коде для изменения количества колонок, точек входа медиа запросов, размера шрифтов и т.д. Но для добавления новых "фич", Вам придется дописывать то, что я и описал в ответе все равно.
    – Rolandius
    18 сен 2015 в 11:08
  • @Rolandius, А можно в Bootstrap делать отступ например на пол колонки только? - col-lg-0.5 18 сен 2015 в 12:13
1

использование разных классов, в зависимости от ширины экрана, можно организовать с помощью классов (уж простите за тавтологию) hidden-* и visible-* где * может быть xs,sm,md и т.д. Назначение этих класов скрывать либо показывать элементы к которым они применены.

с помощью этих классов можно для каждой ширины сделать свой вариант разметки. вот пример который виден только на малых экранах, соответственно вы можете подкинуть к этому объекту например класс customClassSM

<div class="customClassSM hidden-xs visible-sm hidden-md hidden-lg">
...
</div>

вот вариант который виден уже на средних экранах и к нему можно применить класс customClassMD соответственно

<div class="customClassMD hidden-xs hidden-sm visible-md hidden-lg">
...
</div>

скомбинировав таким образом вашу разметку можно достичь нужного результата. Вот пример для всех разрешений

<div class="customClassXS visible-xs hidden-sm hidden-md hidden-lg">
применяется класс customClassXS</div>
<div class="customClassSM hidden-xs visible-sm hidden-md hidden-lg">
применяется класс customClassSM</div>
<div class="customClassMD hidden-xs hidden-sm visible-md hidden-lg">
применяется класс customClassMD</div>
<div class="customClassLG hidden-xs hidden-sm hidden-md visible-lg">
применяется класс customClassLG</div>

В итоге у Вас одновременно только один элемент будет с классом visible-* и соответственно его customClass* и будет применен

3
  • Да спасибо. Идея тоже не плохая, думал уже так делать. Но это удобно только для небольшого изменения, но когда мне нужно менять отступы во всей шапке сайта при различных экранах, это придется дублировать постоянно... слишком получится объемно. 18 сен 2015 в 11:11
  • А можно в Bootstrap делать отступ например на пол колонки только? - col-lg-0.5 18 сен 2015 в 12:06
  • @Дмитрий честно говоря, когда я с такой задачей сталкивался то для себя ее так и не решил.
    – torokhkun
    18 сен 2015 в 12:25
1

Если вам необходимо делать свои отступы или ширину и прочие вещи, тогда вам для нужного разрешения экрана придется отказаться от классов бутстрапа, это как вариант, и написать свои, при этом указать в css @media запрос для нужной ширины и уже там задавать отступы. Так же можно отслеживать js изменение размеров экрана и добавлять / удалять заранее прописанные классы css без всяких @media. И еще вариант писать свои миксины в less / sass, там есть наследование и можно создать свои классы с нужными вам параметрами.

Ваш ответ

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

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