3

Как при определенных размерах использовать container(в bootstrap), а при меньших(телефоны, читалки, планшеты) - container-fluid?

Нужно при больших разрешениях использовать отступы по бокам страницы, а при маленьких - их сносить?

2 ответа 2

3

Вообще то можно создать например такие классы при разных разрешениях как делает bootstrap, и дать эти классы блокам так как вам нужно:

@media (max-width: 767px){
    no-padding-xs{
        padding: 0;
    }
    no-margin-xs{
        margin: 0;
    }
}
@media (max-width: 991px){
    no-padding-sm{
        padding: 0;
    }
    no-margin-sm{
        margin: 0;
    }
}
@media (max-width: 1199px){
    no-padding-md{
        padding: 0;
    }
    no-margin-md{
        margin: 0;
    }
}
@media (min-width: 1200px){
    no-padding-lg{
        padding: 0;
    }
    no-margin-lg{
        margin: 0;
    }
}

А то что вы хотите резные классы для разных разрешениях, это только на js можно сделать, и то это плохой вариант.

5
  • Получается, что такой подход практикуют все в фронтенде?Я просто не верю, что я первый сталкиваюсь с такой проблемой, а соответственно должно же быть готовое решение.
    – nrjshka
    12 июл 2017 в 8:20
  • @nrjshka Вообще то готовое решение может быть , и это не изменение классов как вы хотели, а просто надо вообще менять структуру html, я так думаю, и еще не кто не говорил что если используешь bootstrap то css не надо вообще написать кроме этого. 12 июл 2017 в 8:22
  • И дело не совсем в классах, мне нужно решение, а не зависимость от классов. Я хочу, чтобы была боковая прослойка при больших разрешениях, а при маленьких - она удалялась, хотя контент оставался тем же, но без бокового тиснения. Если не очень понятно объяснил могу добавить фотографию.
    – nrjshka
    12 июл 2017 в 8:22
  • Если есть пример как это можно решить - очень прошу. Я просто привел пример того, как это в теории можно решить, но может есть и другие подходы(должны быть):)
    – nrjshka
    12 июл 2017 в 8:25
  • @nrjshka я не понимаю чем не устраивает такое решение? если бы такие классы как в ответе залили в bootstrap вы бы сказали классно, есть готовое решение, а чем это не устраивает? 12 июл 2017 в 8:27
0

div class="container-lg"

При остальных значениях, будет fluid

В шоке от того что за бредни предлагают вытворить

Ваш ответ

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

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