Bootstrap 4响应式按钮大小 [英] Bootstrap 4 responsive button size
本文介绍了Bootstrap 4响应式按钮大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
Bootstrap 4中有没有办法在media-breakpoint-xs中添加类"btn-sm"(小按钮)?
Is there a way in Bootstrap 4 to add the class 'btn-sm' (small button) when in the media-breakpoint-xs?
除了在xs屏幕中我希望它们自动切换到btn-sm之外,我希望按钮为默认大小.
I'd like to the buttons to be default size except in xs screens where I'd like them to automatically switch to btn-sm.
推荐答案
使用mix-breakpoint-mixin之间的媒体中断点分配.btn
.btn-sm
大小...
Assign .btn
the .btn-sm
sizing using the media-breakpoint-between mixin...
/* change all .btn to .btn-sm size on xs */
@include media-breakpoint-between(xs,sm){
.btn {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
}
}
https://www.codeply.com/go/FoEUO7XCDU
更新-Bootstrap 4.1
此
button-size
mixin已更改为:
Update - Bootstrap 4.1
This
button-size
mixin has changed slightly to:
@include media-breakpoint-between(xs,sm){
.btn {
@include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
}
}
这篇关于Bootstrap 4响应式按钮大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文