twitter-bootstrap - 引导按钮大小不起作用？

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-dangerand btn-groupall 可以工作，但 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中的 Demo 将产生这个：

不同版本的文档

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

Answer 2

（如果有人来这里想知道为什么btn-xs或btn-group-xs不在 >= 4.0 中工作）

从引导程序 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 文件中。事实证明，这就是我的问题。