jQuery 在移动屏幕尺寸上将按钮更改为“btn-block”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28191573/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change buttons to "btn-block" on mobile screen size
提问by Mr Pablo
Using Bootstrap 3, is there a way to make buttons use the btn-block class when on a "xs" screen size?
使用 Bootstrap 3，有没有办法让按钮在“xs”屏幕尺寸上使用 btn-block 类？
Currently I have a form that has some rows containing 3 dropdowns and two buttons, which looks fine on large and medium screens.
目前我有一个表单，其中有一些包含 3 个下拉列表和两个按钮的行，在大屏幕和中屏幕上看起来不错。
When the form changes on small screens, and the form controls are forced to flow vertically, the buttons stay the same size and it looks daft, with them pushed to the left side of the screen.
当窗体在小屏幕上发生变化，窗体控件被迫垂直流动时，按钮保持相同的大小，看起来很愚蠢，它们被推到了屏幕的左侧。
Ideally I'd like to be able to have them as block buttons when on the smaller screen sizes, so they take up the full width (of the form, as do the form controls) and make it look a bit nicer.
理想情况下，我希望能够在较小的屏幕尺寸上将它们作为块按钮，因此它们占据整个宽度（表单的宽度，表单控件也是如此）并使其看起来更好一些。
回答by robjez
Add your custom class to the button, and use media queries to set the width to 100% on devices up to your breakpoint. SO ie
将您的自定义类添加到按钮，并使用媒体查询将设备上的宽度设置为 100%，直到您的断点。即
<button class"bootstrap classes custom-class></button>
and in CSS
并在 CSS 中
@media all and (max-width:480px) {
.custom-class { width: 100%; display:block; }
}
You can also control what is happening above this breakpoint by setting up media queries on different breakpoints.
您还可以通过在不同断点上设置媒体查询来控制此断点上方发生的事情。
回答by caw
Adding the CSS shown below to your Bootstrap 3application enables support for
将下面显示的 CSS 添加到您的Bootstrap 3应用程序，以支持
.btn-xs-block
.btn-sm-block
.btn-md-block
.btn-lg-block
classes that provide variations of btn-blockwhich are responsive and specific to the size of the viewport.
提供btn-block对视口大小具有响应性和特定性的变体的类。
If you have multiple buttons side-by-side and they don't fit on small screens, thus breaking and wrapping to another line, just add btn-xs-blockor btn-sm-block(or in rare cases one of the other classes) to your buttons and they will be full-width and stacked on small screens:
如果您有多个按钮并排放置并且它们不适合小屏幕，因此会中断并换行到另一行，只需将btn-xs-blockor btn-sm-block（或在极少数情况下其他类之一）添加到您的按钮，它们就会被填满-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 for Bootstrap 3:
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;
}
}
回答by Victor
For Bootstrap 4, I use this:
对于 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%;
}
}
See here for reference - http://v4-alpha.getbootstrap.com/layout/overview/
请参阅此处以供参考 - http://v4-alpha.getbootstrap.com/layout/overview/
回答by Brett
For Bootstrap 4.3 you can use built in classes. Mobile: Display Block Desktop: Display Inline block
对于 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>
回答by Silvio Porcellana
If you want to use just "native" bootstrap classes you could do this:
如果您只想使用“本机”引导程序类，您可以这样做：
<input type="submit"
class="btn btn-primary
visible-xs-block
visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
回答by ethmz
You can also put the button in a grid, so you don't have to write any additional css.
您还可以将按钮放在网格中，这样您就不必编写任何额外的 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>
回答by Clary
Bootstrap 4 - Blocks Mobile Screen Size buttons .btn-*-block
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;
}
}
回答by gremo
For Bootstrap 4.4, I wrote the following (SCSS) because it's consistent with other responsive utilities, like text-*-center:
对于 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;
}
}
}
Example usage (a button which expands to full width util lg breakpoint):
示例用法（扩展到全宽 util lg 断点的按钮）：
<a href="#" class="btn btn-primary btn-block btn-lg-inline-block">Button</a>
回答by Robin Wilson
This is the solution I came up with for Bootstrap 4 as I wanted to keep the button centered except for when on a mobile resolution where I wanted it to fill the container.
这是我为 Bootstrap 4 提出的解决方案，因为我想保持按钮居中，除非在移动分辨率上我希望它填充容器。
This involves creating a grid column either side which is hidden at the smallest size d-nonebut visible on small and higher d-sm-blockthen I set a wider size for large and above so the button remains a sensible width at all sizes:
这涉及在任一侧创建一个网格列，该列以最小尺寸隐藏，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>
