Antonchik
@Antonchik
Программирую на HTML

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

Здравствуйте. У bootstrap есть разные размеры кнопок btn-xs,sm,md,lg как сделать чтобы на маленьком экране была кнопка xs а на большом md к примеру? Без JS.
  • Вопрос задан
  • 3801 просмотр
Решения вопроса 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;
        }
    }
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы