Twitter bootstrap btn xs不再是引导4中的有效选项？

我刚迁移到Bootstrap4，我的xs按钮似乎不再是特别小了

看看我没有看到额外的小按钮选项

有人能帮我确认一下吗

---

谢谢

是的，在Bootstrap 4中没有

btn xs

，您必须自己创建这个类。在

scss/mixins/_buttons.scss

中，您将发现名为

按钮大小的mixin，因此在您的scss代码中使用以下代码：

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

我按照巴斯·乔布森的建议添加了以下内容：

.btn-xs
  +button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height, $border-radius)

使用引导的默认
\u variables.scss
，结果如下：


希望它能对您有所帮助。
您需要定义自己的xs样式和变量，这与我最匹配，并且接近bootstrap 3 btn xs大小：

引导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);
}

引导程序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);
}

在GitHub问题上发布了关于此主题的快速修复。在css文件中添加以下内容：

.btn-group-xs > .btn, .btn-xs {
  padding: .25rem .4rem;
  font-size: .875rem;
  line-height: .5;
  border-radius: .2rem;
}

演示：



.btn组xs>.btn、.btn xs{
填充物：25雷姆。4雷姆；
字体大小：.875rem；
线高：.5；
边界半径：.2em；
}
♡
♡
♡
♡引导程序4中不再提供额外的小按钮选项。
只有3种尺寸可用，大的、普通的、小的。
我从旧版本的引导中提取了CSS。您可以在自定义样式表中使用下面提到的CSS样式。在名为btn xs的类的帮助下，您可以对按钮使用旧样式

祝你好运


按钮
{
边缘顶部：10px；
左边距：10px；
}
.btn xs
{
填充：1px 5px！重要；
字体大小：12px！重要；
线高：1.5！重要；
边界半径：3px！重要；
}

这是一个小按钮
，如您在中所述，如果您选中，则不。@vanburen，我想我可以编写自己的css类，名为.btn xs，然后有一个新的（在Beta 2中）
$line height
参数。现在使用：
@包括按钮大小（$btn-padding-y-xs，$btn-padding-x-xs，$font size sm，$input btn line height sm，$btn border radius sm）.btn、.btn xs中的每一行{padding:0.40rem.4rem；字体大小：.775rem；线条高度：.5；边框半径：.2rem；}是的，就像@MikeTeeVee说的，“有时候你只想在网格中滑动一个按钮，让桌面体验不会过度扩展它所在的每一行”。这是个大问题。他们在想什么？