在移动屏幕尺寸上将按钮更改为“btn-block”
Posted
技术标签:
【中文标题】在移动屏幕尺寸上将按钮更改为“btn-block”【英文标题】：Change buttons to "btn-block" on mobile screen size 【发布时间】：2015-03-27 07:30:30 【问题描述】：使用 Bootstrap 3，有没有办法让按钮在“xs”屏幕尺寸上使用 btn-block 类？
目前我有一个包含 3 个下拉菜单和两个按钮的行的表单，在大屏幕和中屏幕上看起来都很好。
当表单在小屏幕上发生变化，并且表单控件被强制垂直流动时，按钮保持相同的大小并且看起来很呆板，它们被推到屏幕的左侧。
理想情况下，我希望能够在较小的屏幕尺寸上将它们用作块按钮，以便它们占据整个宽度（表单的宽度，表单控件也是如此）并使其看起来更好一些。
【问题讨论】：
尝试使用@media 或添加其他带有btn-block 的按钮，该按钮仅对xs 显示可见
带有自定义类的 Bootstrap 3 的完整嵌入式解决方案：***.com/a/41732228/89818
【参考方案1】：
引导更新 - 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>
【讨论】：
【参考方案2】：对于 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>
【讨论】：
【参考方案3】：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;
【讨论】：
【参考方案4】：对于 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.3，这是正确的答案。但是，这仅适用于锚标签，而不适用于按钮。 与链接和按钮样式完美搭配！【参考方案5】：这是我为 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>
【讨论】：
【参考方案6】：您也可以将按钮放在网格中，这样您就不必编写任何额外的 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>
【讨论】：
【参考方案7】：将下面显示的 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;
【讨论】：
非常有帮助。谢谢！【参考方案8】：如果您只想使用“本机”引导类，您可以这样做：
<input type="submit"
class="btn btn-primary
visible-xs-block
visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
【讨论】：
【参考方案9】：对于 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))，因为它向后兼容较小的尺寸；)【参考方案10】：
将您的自定义类添加到按钮，并使用媒体查询将设备上的宽度设置为 100%，直至您的断点。所以即
<button class"bootstrap classes custom-class></button>
在 CSS 中
@media all and (max-width:480px)
.custom-class width: 100%; display:block;
您还可以通过在不同的断点上设置媒体查询来控制在此断点之上发生的事情。
【讨论】：
以上是关于在移动屏幕尺寸上将按钮更改为“btn-block”的主要内容，如果未能解决你的问题，请参考以下文章