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

Question

使用 Bootstrap 3，有没有办法让按钮在 "xs" 屏幕尺寸下使用 btn-block class？

目前我有一个表单，其中一些行包含 3 个下拉菜单和两个按钮，在大屏幕和中屏幕上看起来不错。

当表单在小屏幕上发生变化，并且表单控件被迫垂直移动时，按钮保持相同大小并且看起来很愚蠢，它们被推到屏幕的左侧。

理想情况下，我希望能够在较小的屏幕尺寸上将它们作为块按钮，这样它们就占据了整个宽度（表单的宽度，表单控件也是如此）并使它看起来有点更好。

Answer 1

将您的自定义 class 添加到按钮，并使用媒体查询将设备上的宽度设置为 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，我使用这个：

# 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

如果你只想使用 "native" bootstrap 类你可以这样做：

<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 添加到您的 Bootstrap 3 应用程序可以支持

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

类提供 btn-block 的变体，这些变体响应视口的大小并特定于视口的大小。

如果您有多个按钮 side-by-side 并且它们不适合小屏幕，因此会中断并换行到另一行，只需添加 btn-xs-block 或 btn-sm-block（或在极少数情况下将另一个类) 中的一个放到你的按钮上，它们将 full-width 并堆叠在小屏幕上：

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

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>

Answer 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>

Answer 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>

Answer 8

Bootstrap 4 - 块移动屏幕尺寸按钮 .btn-*-block

/* Blocks Mobile Screen Size buttons
   .btn-xs-block
   .btn-sm-block
   .btn-md-block
   .btn-lg-block
*/

@media (max-width: 767px) {
    .btn-xs-block {
        display: flex;
        width: 100%;
    }
    /*
        Extra config:
        .btn-xs-block .btn {
            flex-grow: 1;
        }
    */
    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: flex;
        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: flex;
        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: flex;
        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 9

对于 Bootstrap 4.4，我编写了以下 (SCSS)，因为它与其他响应式实用程序一致，例如 text-*-center:

// Generate series of `.btn-*-inline-block` (plus `.btn-inline-block` itself)
@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

  .btn#{$infix}-inline-block {
    @include media-breakpoint-up($breakpoint) {
      display: inline-block;
      width: auto;
    }
  }
}

示例用法（一个按钮扩展到全宽 util lg 断点）：

<a href="#" class="btn btn-primary btn-block btn-lg-inline-block">Button</a>

Answer 10

Bootstrap 更新 - 5.1

你可以这样解决这个问题；

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

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

Change buttons to "btn-block" on mobile screen size

html

css

jquery

twitter-bootstrap

twitter-bootstrap-3