Изменить кнопки на «btn-block» на размер мобильного экрана

Question

Используя Bootstrap 3, есть ли способ сделать кнопки, использующие класс btn-block, когда на экране размером «xs»?

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

Когда форма изменяется на маленьких экранах, а элементы управления формой принудительно перемещаются по вертикали, кнопки остаются одинакового размера, и они выглядят глупо, при этом они сдвигаются влево на экране.

В идеале я хотел бы иметь их как блокирующие кнопки при меньших размерах экрана, поэтому они занимают всю ширину (формы, также как и элементы управления формой), и делают это немного лучше ,

Answer 1

Добавьте свой пользовательский класс к кнопке и используйте медиа-запросы, чтобы установить ширину на 100% на устройствах до точки останова. SO т.е.

<button class"bootstrap classes custom-class></button> 

и CSS

@media all and (max-width:480px) { 
    .custom-class { width: 100%; display:block; } 
} 

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

Answer 2

Для Bootstrap 4, я использую это:

# HTML 
<input type="submit" class="btn btn-primary btn-block-xs-only"> 

# SCSS 
@include media-breakpoint-only(xs) { 
    .btn-block-xs-only { 
    display: block; 
    width: 100%; 
    } 
} 

Смотрите здесь для справки - http://v4-alpha.getbootstrap.com/layout/overview/

Answer 3

Если вы хотите использовать только "родные" классы начальной загрузки вы можете сделать это:

<input type="submit" 
    class="btn btn-primary 
     visible-xs-block 
     visible-sm-inline-block visible-md-inline-block visible-lg-inline-block"> 

Answer 4

Добавление CSS, приведенного ниже, к вашему Загрузочный бот 3 приложение поддерживает

.btn-xs-block 
.btn-sm-block 
.btn-md-block 
.btn-lg-block 

классы, которые предоставляют варианты btn-block, которые являются отзывчивыми и конкретными по размеру области просмотра.

Если у вас есть несколько кнопок, расположенных бок о бок, и они не помещаются на маленьких экранах, тем самым нарушая и обертывание на другую линию, просто добавьте btn-xs-block или btn-sm-block (или в редких случаях один из других классов), чтобы ваш кнопки и они будут во всю ширину и уложены на маленьких экранах:

<button class="btn btn-default btn-xs-block" type="button">Button 1</button> 
<button class="btn btn-default btn-xs-block" type="button">Button 2</button> 

CSS для Bootstrap 3:

@media (max-width: 767px) { 
    .btn-xs-block { 
     display: block; 
     width: 100%; 
    } 
    input[type="submit"].btn-xs-block, 
    input[type="reset"].btn-xs-block, 
    input[type="button"].btn-xs-block { 
     width: 100%; 
    } 
    .btn-block + .btn-xs-block, 
    .btn-xs-block + .btn-block, 
    .btn-xs-block + .btn-xs-block { 
     margin-top: 0.5rem; 
    } 
} 
@media (min-width: 768px) and (max-width: 991px) { 
    .btn-sm-block { 
     display: block; 
     width: 100%; 
    } 
    input[type="submit"].btn-sm-block, 
    input[type="reset"].btn-sm-block, 
    input[type="button"].btn-sm-block { 
     width: 100%; 
    } 
    .btn-block + .btn-sm-block, 
    .btn-sm-block + .btn-block, 
    .btn-sm-block + .btn-sm-block { 
     margin-top: 0.5rem; 
    } 
} 
@media (min-width: 992px) and (max-width: 1199px) { 
    .btn-md-block { 
     display: block; 
     width: 100%; 
    } 
    input[type="submit"].btn-md-block, 
    input[type="reset"].btn-md-block, 
    input[type="button"].btn-md-block { 
     width: 100%; 
    } 
    .btn-block + .btn-md-block, 
    .btn-md-block + .btn-block, 
    .btn-md-block + .btn-md-block { 
     margin-top: 0.5rem; 
    } 
} 
@media (min-width: 1200px) { 
    .btn-lg-block { 
     display: block; 
     width: 100%; 
    } 
    input[type="submit"].btn-lg-block, 
    input[type="reset"].btn-lg-block, 
    input[type="button"].btn-lg-block { 
     width: 100%; 
    } 
    .btn-block + .btn-lg-block, 
    .btn-lg-block + .btn-block, 
    .btn-lg-block + .btn-lg-block { 
     margin-top: 0.5rem; 
    } 
}