twitter-bootstrap 如何更改 Bootstrap 按钮的形状
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32974967/
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
How to change shape of Bootstrap button
提问by Gavin Niu
How can I change the round corner button default in bootstrap into normal rectangle button? Now I can only change the size color or the font of the button
如何将引导程序中的默认圆角按钮更改为普通矩形按钮？现在我只能更改按钮的大小颜色或字体
.btn-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-sm,
.btn-xs {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}Appreciate your help
感谢你的帮助
回答by vanburen
The best practice is to create a custom class so you don't change your base CSS in the event you want to use it elsewhere, then apply your changes.
最佳实践是创建一个自定义类，以便在您想在其他地方使用它时不会更改您的基本 CSS，然后应用您的更改。
In the example I use .btn.btn-custom-lg, .btn.btn-custom-sm, .btn.btn-custom-xs but if you only want to change something like the border-radiusfor all buttons you can make one global class to apply to the button: .btn-square { border-radius: 0; }
在示例中，我使用 .btn.btn-custom-lg, .btn.btn-custom-sm, .btn.btn-custom-xs 但如果您只想更改诸如border-radiusfor all 按钮之类的内容，您可以创建一个全局类应用于按钮：.btn-square { border-radius: 0; }
See working example.
请参阅工作示例。
/*Specific Cases*/
.btn.btn-custom-lg,
.btn.btn-custom-sm,
.btn.btn-custom-xs {
border-radius: 0;
}
/*Global*/
.btn.btn-square {
border-radius: 0;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<hr>
<h3>Specific</h3>
<div class="btn btn-default btn-lg btn-custom-lg">Button Default</div>
<div class="btn btn-default btn-sm btn-custom-sm">Button Default</div>
<div class="btn btn-default btn-xs btn-custom-xs">Button Default</div>
<hr>
<h3>Global</h3>
<div class="btn btn-default btn-lg btn-square">Button Default</div>
<div class="btn btn-default btn-sm btn-square">Button Default</div>
<div class="btn btn-default btn-xs btn-square">Button Default</div>
</div>回答by Saif Islam
Add the class rounded-0, as explained on GetBootstrap.com:
添加类rounded-0，如GetBootstrap.com上所述：
<a href="tel:+447447218297" class="btn btn-lg btn-success rounded-0"><img src="">Call Now</a>
