twitter-bootstrap – 引导按钮大小不工作?

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – 引导按钮大小不工作?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
以下是三种不同的按钮大小:
<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?

解决方法

Bootstrap将其按钮的名称v2.3更改为 v3.0
2.3     -->   3.0  
.btn-large --> .btn-lg  
.btn-small --> .btn-sm  
.btn-mini  --> .btn-xs

这里是一个Full Migration Guide从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>

Working Demo in jsFiddle

这将产生这:

猜你在找的Bootstrap相关文章