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

发布时间：2020-12-18 00:01:21 所属栏目：安全来源：网络整理

导读：以下是三种不同的按钮大小： 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/divdiv class="btn-group" a c

以下是三种不同的按钮大小：

<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

这将产生这：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!