Bootstrap 4中是否有办法添加课程' btn-sm' (小按钮)在media-breakpoint-xs?
时我希望这些按钮是默认尺寸,除了xs屏幕,我希望它们能自动切换到btn-sm。
答案 0 :(得分:11)
使用介质断点在mixin之间分配.btn
.btn-sm
大小调整...
/* 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略有变化:
@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);
}
}
答案 1 :(得分:1)
在Bootstrap 4中,可以仅使用实用程序类来实现。
<a href="#" class="btn btn-primary d-flex justify-content-center d-md-table mx-auto">Book a demo</a>
答案 2 :(得分:1)
如果你想让按钮响应,你需要让它的文本响应。
您可以使用 vw(视口宽度)作为字体大小:
@media (max-width: 576px) {
.responsive-content {
font-size: 6vw;
}
}
<button type="button" class="responsive-content btn btn-primary">
responsive button
</button>
现在您可以调整屏幕大小以查看效果。