Bootstrap 4响应式按钮大小

问题描述：

Bootstrap 4在media-breakpoint-xs中添加类'btn-sm'（小按钮）时有没有办法？Bootstrap 4响应式按钮大小

我想这些按钮是默认的大小，除了在XS屏幕上，我希望他们自动切换到btn-sm。

将该类添加到元素并在媒体查询中应用样式。 –

该类是引导程序默认值，通过将该类添加到代码中的元素中，该按钮将获得这些样式，而不管当前断点。 –

可能重复的[如何在bootstrap3中创建响应按钮？]（https://stackoverflow.com/questions/21709917/how-to-create-responsive-buttons-in-bootstrap3） –

答

分配.btn的.btn-sm上浆利用媒体断点之间的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

更新 - 引导4测试版
这 button-size混入有所改变：

@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); 
    } 
}

这就是它！感谢您花时间阅读问题 – Nik

我在哪里可以找到上面的代码？ – Mark

@Mark可以将它添加到项目中的任何.scss文件中，但是您可能还必须导入bootstrap-grid.scss和_buttons.scss，以便知道'xs'，'sm'，'$ btn-padding-y -sm'（和其他变量）的含义。如： @ import“〜bootstrap/scss/bootstrap-grid.scss”; @ import“〜bootstrap/scss/mixins/_buttons.scss”; 所有这些东西可能会有所不同，这取决于你如何设置你的ng2项目 – Nik

Bootstrap 4响应式按钮大小

相关推荐