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-danger和btn-group所有的工作,而不是BTN-小/小/等？

Answer 1

Bootstrap将其按钮的名称从v2.3更改为v3.0:

   2.3     -->   3.0  
.btn-large --> .btn-lg  
.btn-small --> .btn-sm  
.btn-mini  --> .btn-xs

这是Bootply 的完整迁移指南.

所以你更新的代码应如下所示:

<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工作演示

哪个会产生这个:

Answer 2

(如果有人来到这里想知道为什么btn-xs或btn-group-xs不在> = 4.0)

从bootstrap 3.0更改为4.0:

为576px及以下的较小设备添加了新的网格层(我们的新xs层).

...

完全丢弃.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>