使用 Bootstrap 3，有没有办法让按钮在“xs”屏幕尺寸上使用 btn-block 类？
目前我有一个包含 3 个下拉菜单和两个按钮的行的表单，在大屏幕和中屏幕上看起来都很好。
当表单在小屏幕上发生变化，并且表单控件被强制垂直流动时，按钮保持相同的大小并且看起来很呆板，它们被推到屏幕的左侧。
理想情况下，我希望能够在较小的屏幕尺寸上将它们用作块按钮，以便它们占据整个宽度（表单的宽度，表单控件也是如此）并使其看起来更好一些。
【问题讨论】：
@media 或添加其他带有btn-block 的按钮，该按钮仅对xs 显示可见
标签： jquery html css twitter-bootstrap twitter-bootstrap-3
引导更新 - 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>
【讨论】：
对于 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>
【讨论】：
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;
}
}
【讨论】：
对于 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>
【讨论】：
这是我为 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>
【讨论】：
您也可以将按钮放在网格中，这样您就不必编写任何额外的 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>
【讨论】：
将下面显示的 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;
}
}
【讨论】：
如果您只想使用“本机”引导类，您可以这样做：
<input type="submit"
class="btn btn-primary
visible-xs-block
visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
【讨论】：
对于 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/
【讨论】：
@media (max-width: breakpoint-min(sm))，因为它向后兼容较小的尺寸；)
将您的自定义类添加到按钮，并使用媒体查询将设备上的宽度设置为 100%，直至您的断点。所以即
<button class"bootstrap classes custom-class></button>
在 CSS 中
@media all and (max-width:480px) {
.custom-class { width: 100%; display:block; }
}
您还可以通过在不同的断点上设置媒体查询来控制在此断点之上发生的事情。
【讨论】：