twitter-bootstrap btn-xs 不再是引导程序 4 中的有效选项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33911049/
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
btn-xs no longer a valid option in bootstrap 4?
提问by Dragan
I just migrated to bootstrap 4 and my xs buttons no longer seem to be extra small!
我刚刚迁移到 bootstrap 4，我的 xs 按钮似乎不再特别小了！
Looking at the docs for buttons in bootstrap 4I don't see the option for extra small buttons?
查看bootstrap 4 中按钮的文档，我没有看到额外小按钮的选项？
Can anyone confirm this for me?
任何人都可以为我确认这一点吗？
Thanks!
谢谢！
回答by aloisdg moving to codidact.com
@rifton007posted a quick fix in the GitHub issue on this subject. Add this in your css file:
@rifton007在 GitHub 问题中发布了有关此主题的快速修复程序。在你的 css 文件中添加：
.btn-group-xs > .btn, .btn-xs {
padding: .25rem .4rem;
font-size: .875rem;
line-height: .5;
border-radius: .2rem;
}
Demo:
演示：
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.btn-group-xs > .btn, .btn-xs {
padding: .25rem .4rem;
font-size: .875rem;
line-height: .5;
border-radius: .2rem;
}
</style>
<button class="btn btn-primary btn-xs">?</button>
<button class="btn btn-primary btn-sm">?</button>
<button class="btn btn-primary">?</button>
<button class="btn btn-primary btn-lg">?</button>回答by Bass Jobsen
Yes there is no btn-xsin Bootstrap 4, you will have to create this class your self. In the scss/mixins/_buttons.scssyou will find the mixin called button-sizeso in you SCSS code use the following code:
是的btn-xs，Bootstrap 4 中没有，你必须自己创建这个类。在scss/mixins/_buttons.scss你会发现button-size在你的 SCSS 代码中调用的 mixin使用以下代码：
.btn-xs {
// line-height: ensure proper height of button next to extra small input
@include button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius);
}
回答by squadwuschel
you need to define your own xs style and variable this matches best for me and comes close to the bootstrap 3 btn-xs size:
您需要定义自己的 xs 样式和变量，这对我来说最匹配，并且接近 bootstrap 3 btn-xs 的大小：
Bootstrap 4 Alpha
引导程序 4 Alpha
$btn-padding-x-xs: .38rem !default;
$btn-padding-y-xs: .18rem !default;
.btn-xs {
@include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-sm, $btn-border-radius-sm);
}
Bootstrap 4 Beta 2
引导程序 4 测试版 2
$btn-padding-x-xs: .20rem !default;
$btn-padding-y-xs: .12rem !default;
$input-btn-line-height-xs: 1.1 !default;
.btn.btn-xs {
// line-height: ensure proper height of button next to small input
@include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-sm, $input-btn-line-height-xs, $btn-border-radius-sm);
}
回答by Jorge Sampayo
I added this as Bass Jobsen suggested:
我按照 Bass Jobsen 的建议添加了这个：
.btn-xs
+button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height, $border-radius)
Using the default _variables.scssof Bootstrap and this was the result:
使用_variables.scssBootstrap的默认值，结果如下：
Hope it helps you.
希望对你有帮助。
回答by Rushikesh Shelke
There is no longer available the option of extra small button in bootstrap 4. Only 3 sizes are available, large, normal, small.
bootstrap 4 中不再提供额外小按钮的选项。只有 3 种尺寸可用，大、正常、小。
