Задать вопрос
Antonchik
@Antonchik
Программирую на HTML

Адаптивные кнопки bootstrap?

Здравствуйте. У bootstrap есть разные размеры кнопок btn-xs,sm,md,lg как сделать чтобы на маленьком экране была кнопка xs а на большом md к примеру? Без JS.
  • Вопрос задан
  • 3816 просмотров
Подписаться 1 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 1
@NoMoney
@media (max-width: 767px) {
        /*xs*/
        .btn {
            padding: 1px 5px;
            font-size: 12px;
            line-height: 1.5;
            border-radius: 3px;
        }
    }
    @media (min-width: 768px) and (max-width: 991px) {
        /*sm*/
        .btn {
            padding: 5px 10px;
            font-size: 12px;
            line-height: 1.5;
            border-radius: 3px;
        }
    }
    @media (min-width: 992px) and (max-width: 1199px) {
        /*md*/
        .btn {
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            border-radius: 4px;
        }
    }
    @media (min-width: 1200px) {
        /*lg*/
        .btn {
            padding: 10px 16px;
            font-size: 18px;
            line-height: 1.3333333;
            border-radius: 6px;
        }
    }
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы