以下是三种不同的按钮大小:
<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>
这将产生这: