twitter-bootstrap Bootstrap 按钮大小不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18410934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap button sizes not working?
提问by Devil's Advocate
Here are three different button sizes:
以下是三种不同的按钮尺寸：
<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>
All three of those result in this:
这三个结果都是这样的：
Why would btn, btn-success, btn-dangerand btn-groupall work, but not btn-mini/small/etc?
为什么btn, btn-success,btn-danger和btn-group所有工作，但不是 btn-mini/small/etc？
回答by KyleMit
Bootstrap changed the names of their buttons from v2.3to v3.0:
Bootstrap 将其按钮的名称从v2.3更改为v3.0：
2.3 --> 3.0
.btn-large --> .btn-lg
.btn-small --> .btn-sm
.btn-mini --> .btn-xs
Here's a Full Migration Guidefrom Bootply.
这是Bootply的完整迁移指南。
So your updated code should look like this:
所以你更新后的代码应该是这样的：
<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
jsFiddle 中的工作演示
Which will produce this:
这将产生这个：
回答by Caner
(If someone came here wondering why btn-xsor btn-group-xsis not working in >= 4.0)
（如果有人来到这里想知道为什么btn-xs或btn-group-xs不在 >= 4.0 中工作）
Change log from bootstrap 3.0 to 4.0:
将日志从引导程序 3.0 更改为 4.0：
Dropped the .btn-xs class entirely as .btn-sm is proportionally much smaller than v3's.
...
Dropped the .btn-group-xs class entirely given removal of .btn-xs.
完全删除 .btn-xs 类，因为 .btn-sm 按比例比 v3 小得多。
...
鉴于 .btn-xs 的删除，完全删除了 .btn-group-xs 类。
回答by amatellanes
You have to change the classes if you use the version 3.0
如果使用3.0 版，则必须更改类
<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>
回答by Kanban
Also make sure if bootstrap.css is being overridden by our own customised *.css file, than you have .btn-sm.... logic added into your customised *.css file. This was the problem in my case as it turned out.
还要确保 bootstrap.css 是否被我们自己定制的 *.css 文件覆盖，而不是将 .btn-sm.... 逻辑添加到您的定制 *.css 文件中。事实证明，这是我遇到的问题。
