引导按钮尺寸不起作用？

Question

以下是三种不同的按钮尺寸：

<div class="btn-group btn-small">
    <button class="btn btn-small btn-success" href="#" type="button">Approve</button>
    <button class="btn btn-small btn-danger" href="#" type="button">Deny</button>
</div>

<div class="btn-group">
    <a class="btn btn-mini btn-success" href="#">Approve</a>
    <a class="btn btn-mini btn-danger" href="#">Deny</a>
</div>

<div class="btn-group">
    <a class="btn btn-success" href="#">Approve</a>
    <a class="btn btn-danger" href="#">Deny</a>
</div>

所有这三个结果都是这样的：

为什么

btn

、

btn-success

、

btn-danger

和

btn-group

都可以工作，但 btn-mini/small/etc 却不能？

Answer 1

Bootstrap 将其按钮的名称从 2.x ➡ 更改为 3.x

版本对比

|    2.x     |   3.x   |   4.x   |
|------------|---------|---------|
| .btn-large | .btn-lg | .btn-lg |
| .btn-small | .btn-sm | .btn-sm |
| .btn-mini  | .btn-xs |    -    |

Bootstrap 3 演示

因此您更新后的代码应如下所示：

<div class="btn-group">
    <a class="btn btn-xs btn-success" href="#">Approve</a>
    <a class="btn btn-xs btn-danger" href="#">Deny</a>
</div>
<br>
<div class="btn-group">
    <a class="btn btn-sm btn-success" href="#">Approve</a>
    <a class="btn btn-sm btn-danger" href="#">Deny</a>
</div>
<br>
<div class="btn-group">
    <a class="btn btn-success" href="#">Approve</a>
    <a class="btn btn-danger" href="#">Deny</a>
</div>

jsFiddle中的演示将产生以下结果：

各种版本的文档

• 引导按钮 2.x
• 引导按钮3.x
• 引导按钮 4.x
• 迁移指南2➡3
• 迁移指南 3 ➡ 4

Answer 2

（如果有人来到这里想知道为什么

btn-xs

或

btn-group-xs

在 >= 4.0 中不起作用）

将日志从 bootstrap 3.0 更改为 4.0：

完全删除了 .btn-xs 类，因为 .btn-sm 比例很大 比 v3 小。

...

由于删除了 .btn-xs，所以完全删除了 .btn-group-xs 类。

来源

Answer 3

如果您使用3.0版本

，则必须更改课程

http://jsfiddle.net/WrQNh/1/

<div class="btn-group btn-small">
    <button class="btn btn-xs btn-success" href="#" type="button">Approve</button>
    <button class="btn btn-xs btn-danger" href="#" type="button">Deny</button>
</div>
<br>
<div class="btn-group"> <a class="btn btn-sm btn-success" href="#">Approve</a>
     <a class="btn btn-sm btn-danger" href="#">Deny</a>
</div>
<br>
<div class="btn-group"> <a class="btn btn-success" href="#">Approve</a>
    <a class="btn btn-danger" href="#">Deny</a>
</div>

Answer 4

还要确保如果 bootstrap.css 被我们自己定制的 *.css 文件覆盖，那么您将 .btn-sm... 逻辑添加到您的定制 *.css 文件中。事实证明，这就是我的案例的问题。