Html 如何增加引导按钮的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32864415/
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 can I increase the size of a bootstrap button?
提问by Alex Shmatko
For example I've made my button
例如我做了我的按钮
<div class="btn btn-default">
Active
</div>
and it looks like the following
它看起来像下面这样
However I would like to have my button like this
但是我想要这样的按钮
How can I enlarge the width of the bootstrap button regardless of text size?
无论文本大小如何，如何放大引导按钮的宽度？
采纳答案by Rahul Tripathi
You can try to use btn-sm, btn-xs and btn-lg classes like this:
您可以尝试使用 btn-sm、btn-xs 和 btn-lg 类，如下所示：
.btn-xl {
padding: 10px 20px;
font-size: 20px;
border-radius: 10px;
}
You can make use of Bootstrap .btn-group-justifiedcss class. Or you can simply add:
您可以使用 Bootstrap .btn-group-justifiedcss 类。或者您可以简单地添加：
.btn-xl {
padding: 10px 20px;
font-size: 20px;
border-radius: 10px;
width:50%; //Specify your width here
}
回答by Daniel
bootstrap comes with clas btn-lg http://getbootstrap.com/components/#btn-dropdowns-sizing
bootstrap 带有 clas btn-lg http://getbootstrap.com/components/#btn-dropdowns-sizing
<div class="btn btn-default btn-block">
Active
</div>
but if you want to have the button of the width of your column / container add btn-block
但是如果你想拥有列/容器宽度的按钮，请添加 btn-block
<div class="btn btn-default btn-lg">
Active
</div>
However this will expand to 100% so make surt ethat you will wrap your button in certain amount of columns e.g. then you know its always stays 3 columns until xs screen
但是，这将扩展到 100%，因此请确保您将按钮包装在一定数量的列中，例如，您知道它始终保持 3 列直到 xs 屏幕
<div class="col-sm-3">
<div class="btn btn-default btn-block">
Active
</div>
</div>
回答by Navtosh Adhikari
you can add css property for button size as follow
.btn{min-width:250px;}
回答by Yeldar Kurmangaliyev
Default Bootstrap size classes
默认 Bootstrap 大小类
You can use btn-lg, btn-smand btn-xsclasses for manipulating with its size.
您可以使用btn-lg,btn-sm和btn-xs类来操作其大小。
btn-block
btn-block
Also, there is a class btn-blockwhich will extend your button to the whole block. It is very convenient in combination with Bootstrap grid.
For example, this code will show a button with the width equal to half of screen for medium and large screens; and will show a full-width button for small screens:
此外，还有一个类btn-block可以将您的按钮扩展到整个块。与 Bootstrap 网格结合使用非常方便。
例如，此代码将显示一个按钮，其宽度等于中大屏幕屏幕的一半；并将为小屏幕显示全角按钮：
<div class="container">
<div class="col-xs-12 col-xs-offset-0 col-sm-offset-3 col-sm-6">
<button class="btn btn-group">Click me!</button>
</div>
</div>
Check this JSFiddleout. Try to resize frame.
检查这个 JSFiddle。尝试调整框架大小。
If it is not enough, you can easily create your custom class.
如果还不够，您可以轻松创建自定义类。
