Bootstrap 4中btn-xs选项不再有效？

Question

我刚迁移到Bootstrap 4，我的xs按钮似乎不再是extra small了！

查看Bootstrap 4中按钮的文档，我没有看到extra small按钮的选项？

有人能为我确认一下吗？

谢谢！

- Dragan

---

正如您从文档中所述，如果您检查source，是的，没有。 - vanburen

@vanburen，我想我可以自己编写一个名为.btn-xs的CSS类，对吧。 - Dragan

Answer 1

@rifton007在此问题的GitHub issue中发布了一个快速修复方法。将以下内容添加到您的CSS文件中：

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

示例：

<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>

source

编辑：

之后在这个问题上，@deadmann 回复说他在旧的BS3文档中挖掘出以下代码：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<style>
.btn-group-xs > .btn, .btn-xs {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
</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>

- aloisdg

---

给予原始来源链接的引用及给予Rifton007应有的认可。在该来源链接中，Squadwuschel提出了一个很好的观点，即并非我们所有人都在编写响应式移动应用程序，有时您只想将按钮放入网格中以获得桌面体验，而不会使其所在的每一行过度扩展。 - MikeTeeVee

.btn-group-xs > .btn, .btn-xs { padding: 0.40rem .4rem; font-size: .775rem; line-height: .5; border-radius: .2rem; } - Project Mayhem

是的，就像@MikeTeeVee所说，“有时你只想在网格中放入一个按钮，以获得桌面体验，而不会使它所在的每一行都过度扩展”。那是个大问题。他们当时在想什么？ - Vanity Slug

已验证可与Bootstrap 5一起使用，谢谢！我使用了这个类示例来创建一个按钮组，效果很好，但我还添加了"w-100"到按钮组类中，以确保按钮组扩展到父div的全宽度，使其对齐得很好。 - OJB1

Answer 2

在 Bootstrap 4 中没有 btn-xs 这个类，你需要自己创建。在 scss/mixins/_buttons.scss 文件中可以找到名为 button-size 的 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);
}

- Bass Jobsen

---

你能提供CSS吗？ - stallingOne

button-size() 不再是一个有效的函数。 - Routhinator

按钮大小仍然有效：https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_buttons.scss#L99 - Jorge Sampayo

建议编辑直接来自于Bootstrap的文件吗？也就是那些带有下划线前缀（_）的文件。 - Ridwan

Answer 3

您需要定义自己的xs样式和变量，这个适合我最好，接近于Bootstrap 3的btn-xs大小：

Bootstrap 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

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

- squadwuschel

---

现在有一个新的（在Beta 2中）$line-height参数。现在使用：@include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-sm, $input-btn-line-height-sm, $btn-border-radius-sm); - voidstate

你能提供 CSS 吗？ - stallingOne

button-size() 不再是一个有效的函数。 - Routhinator

button-size仍然有效：https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_buttons.scss#L99 - Jorge Sampayo

是的，我几个小时后意识到了这一点。应该更新答案，提到 mixin 必须在变量之前手动加载才能起作用。 - Routhinator

建议直接编辑来自Bootstrap的文件吗？也就是带有下划线前缀（_）的文件。 - Ridwan

Answer 4

我已经从旧版 Bootstrap 中提取了 CSS 样式。您可以在自定义样式表中使用下面提到的 CSS 样式。通过使用名为 btn-xs 的类，您可以为按钮使用旧样式。

祝你好运。

button
{
  margin-top: 10px;
    margin-left: 10px;
}
.btn-xs
{
    padding: 1px 5px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    border-radius: 3px !important;
}

<link rel="stylesheet" href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css">

<button class="btn btn-primary btn-xs">This is Small Button</button>

- John Doe

Answer 5

根据Bass Jobsen的建议，我添加了以下内容：

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

使用Bootstrap的默认_variables.scss，得到了如下结果：

希望对你有所帮助。

- Jorge Sampayo

---

button-size()不再是一个有效的函数。 - Routhinator

主要仓库：https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_buttons.scss#L99Ruby 仓库：https://github.com/twbs/bootstrap-rubygem/blob/master/assets/stylesheets/bootstrap/mixins/_buttons.scss#L99 - Jorge Sampayo

是的，几个小时后我意识到了这一点。应该更新答案，提到 mixin 必须在变量之前手动加载才能工作。 - Routhinator

Answer 6

在 Bootstrap 4 中，已经不再提供额外小号按钮的选项。现在只有三种尺寸可用：大号、正常和小号。

- Rushikesh Shelke

Answer 7

这在Bootstrap 5中有效。

.btn-xs {
    @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-xs, $border-radius);
}

- Iridium