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-mini / small / etc？

Answer 1

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

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

这是来自Bootply的Full Migration Guide。

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

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

Working Demo in jsFiddle

哪会产生这个：

Answer 2

（如果有人来到这里想知道为什么btn-xs或btn-group-xs无效>＆gt; = 4.0）

从bootstrap 3.0更改为4.0：

  

为576px及以下的小型设备添加了新的网格层（我们的新版本   xs tier）。

     

...

     

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

     

...

     

完全放弃了.btn-xs类，删除了.btn-xs。

Source

Answer 3

如果使用version 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

还要确保我们自定义的* .css文件是否覆盖了bootstrap.css，而不是将.btn-sm ....逻辑添加到自定义的* .css文件中。事实证明，这就是我的问题。