在移动屏幕尺寸上将按钮更改为"btn-block"

Question

使用Bootstrap 3,有没有办法让按钮在"xs"屏幕尺寸时使用btn-block类？

目前我的表格有一些行包含3个下拉菜单和两个按钮,在大中型屏幕上看起来很好.

当窗体在小屏幕上更改,并且窗体控件被迫垂直流动时,按钮保持相同的大小并且看起来很笨,将它们推到屏幕的左侧.

理想情况下,我希望能够在较小的屏幕尺寸上将它们作为块按钮,因此它们占据整个宽度(表单的形状,与表单控件一样)并使其看起来更好一些.

Answer 1

将自定义类添加到按钮,并使用媒体查询将设备的宽度设置为断点处的设备的100%.所以即

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

在CSS中

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

您还可以通过在不同断点上设置媒体查询来控制此断点上方发生的情况.

Answer 2

对于 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>

Answer 3

将下面显示的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>

Bootstrap 3的CSS:

@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;
    }
}

Answer 4

对于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 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>