Изменять размер кнопок в бутстрапе

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

<button name="button" type="submit" id="edit_button-46" class="btn btn-default" value="edit" >Edit</button>

В основном на более мелких устройствах класс btn-xs должен быть добавлен ко всем кнопкам.

Возможно, я могу выполнить это через JQuery, но задавался вопросом, была ли эта функция уже загружена?

Ответы

Ответ 1

Вы можете использовать запросы CSS @media для масштабирования кнопок соответственно.

@media (max-width: 768px) {
  .btn-responsive {
    padding:2px 4px;
    font-size:80%;
    line-height: 1;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .btn-responsive {
    padding:4px 9px;
    font-size:90%;
    line-height: 1.2;
  }
}

Демо: http://bootply.com/93706

Обновление для Bootstrap 4:
Размер загрузочной кнопки Bootstrap 4

Ответ 2

Расширение ответа ZimSystem..

@media (max-width: 768px) {
  .btn {
    font-size:11px;
    padding:4px 6px;
  }
}

@media (min-width: 768px) {
  .btn {
    font-size:12px;
    padding:6px 12px;
  }
}

@media (min-width: 992px) {
  .btn {
    font-size:14px;
    padding:8px 12px;
  }
}

@media (min-width: 1200px) {
  .btn {
    padding:10px 16px;
    font-size:18px;
  }
}

Ответ 3

Просто хотел добавить другую альтернативу. Если вы используете Bootstrap LESS, вы также можете использовать микшины.

Если вы заглянете в папку Bootstrap LESS (bootstrap > less > mixins), вы увидите файл buttons.less. Если вы откроете это, вы увидите микс .button-size().

Здесь находится mixin:

.button-size(
    vertical padding;
    horizontal padding;
    font size;
    line height;
    border-radius
);

Здесь вы динамически создаете кнопку:

Вам нужно будет передать определенные параметры. Он будет тормозить, если он отсутствует

.button-size(10px; 10px; 1em; 1.5em; 0);

Здесь приведен пример использования существующих переменных младшего бутстрапа:

    .btn {
        @media (min-width: @screen-sm-min) {
            .button-size(
                @padding-small-vertical;
                @padding-small-horizontal;
                @font-size-small;
                @line-height-base;
                @border-radius-small
            );
        }
        @media (min-width: @screen-md-min) {
            .button-size(
                @padding-large-vertical;
                @padding-large-horizontal;
                @font-size-large;
                @line-height-base;
                @border-radius-large
            );
        }
    }