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

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

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

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

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

Ответы

Ответ 1

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

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

и в CSS

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

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

Ответ 2

Добавление CSS, показанного ниже, в ваше приложение Bootstrap 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;
    }
}

Ответ 3

Для 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/

Ответ 4

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

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

Ответ 5

Вы также можете поместить кнопку в сетку, так что вам не нужно писать никаких дополнительных CSS.

    <div class="row">
        <div class="col-12 col-md-2">
            <button type="submit" id="submit" class="btn btn-primary btn-block">submit</button>
        </div>

        <div class="col-0 col-md-10"></div>
    </div>

Ответ 6

Это решение, которое я придумал для Bootstrap 4, поскольку я хотел, чтобы кнопка была в центре, за исключением случая, когда на мобильном разрешении я хотел, чтобы он заполнил контейнер.

Это включает в себя создание столбца сетки с обеих сторон, который скрыт при наименьшем размере d-none, но видим при малых и более высоких значениях d-sm-block, после чего я установил более широкий размер для больших и выше, чтобы кнопка оставалась разумной шириной при всех размерах:

<div class="row">
   <div class="col-lg-5 col-md d-none d-sm-block">
   </div>
   <div class="col-md text-center">
      <button type="submit" class="btn btn-primary btn-block">Register</button>
   </div>
   <div class="col-lg-5 col-md d-none d-sm-block">
   </div>
</div>

Ответ 7

Для Bootstrap 4.3 вы можете использовать встроенные классы. Мобильный: Блок дисплея Рабочий стол: отображение встроенного блока

<a href="#button1" class="btn d-block d-md-inline-block">Button 1</a>
<a href="#button1" class="btn d-block d-md-inline-block">Button 2</a>