这是三种不同的按钮尺寸:

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

所有这三个导致:

为什么btnbtn-successbtn-dangerbtn-group都可以工作,但是btn-mini / small / etc不起作用?

最佳答案

Bootstrap将其按钮的名称从2.x changed更改为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>

Demo in jsFiddle将产生以下内容:

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

各种版本的文档
  • Bootstrap Buttons 2.x
  • Bootstrap Buttons 3.x
  • Bootstrap Buttons 4.x
  • Migration Guide 2 ➡ 3
  • Migration Guide 3 ➡ 4
  • 关于twitter-bootstrap - 引导按钮大小不起作用?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18410934/

    10-13 00:10
    查看更多