比如我把我的纽扣
<div class="btn btn-default"> Active </div>
它看起来如下所示
但是我想有我的按钮像这样
如何在不考虑文本大小的情况下放大引导按钮的宽度?
wvyml7n51#
您可以尝试使用btn-sm、btn-xs和btn-lg类,如下所示:
.btn-xl { padding: 10px 20px; font-size: 20px; border-radius: 10px; }
您可以使用Bootstrap .btn-group-justified css类。或者您可以简单地添加:
.btn-group-justified
.btn-xl { padding: 10px 20px; font-size: 20px; border-radius: 10px; width:50%; //Specify your width here }
ryhaxcpt2#
Bootstrap 随btn-lghttp://getbootstrap.com/components/#btn-dropdowns-sizing
<div class="btn btn-default btn-block"> Active </div>
但是如果你想让你的列/容器的宽度的按钮添加btn-block
<div class="btn btn-default btn-lg"> Active </div>
然而,这将扩展到100%,所以使surt e,你将 Package 你的按钮在一定数量的列,例如,那么你知道它总是停留在3列,直到xs屏幕
<div class="col-sm-3"> <div class="btn btn-default btn-block"> Active </div> </div>
aydmsdu93#
您可以为按钮大小添加自己的css属性,如下所示:
.btn { min-width: 250px; }
cygmwpex4#
您可以使用btn-lg、btn-sm和btn-xs类别来行程其大小。
btn-lg
btn-sm
btn-xs
btn-block
此外,还有一个类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>
checkout this JSFiddle。尝试调整框架大小。
如果这还不够,您可以轻松地创建自定义类。
rkttyhzu5#
使用块级按钮,即那些跨越父级的整个宽度的按钮。您可以通过在按钮元素中添加btn-block类来实现这一点。此处为文档
ki0zmccv6#
只需简单地添加到类的引导代码。第一个
pgky5nke7#
您也可以使用css属性scale来执行此操作
scale
<button type="button" class="btn btn-primary " style="scale:1.5">Active</button>
或者只是构建一个类
.scale15{ scale:1.5; }
http://jsfiddle.net/dazzafact/aj1hcsty/1/
7条答案
按热度按时间wvyml7n51#
您可以尝试使用btn-sm、btn-xs和btn-lg类,如下所示:
您可以使用Bootstrap
.btn-group-justified
css类。或者您可以简单地添加:ryhaxcpt2#
Bootstrap 随btn-lghttp://getbootstrap.com/components/#btn-dropdowns-sizing
但是如果你想让你的列/容器的宽度的按钮添加btn-block
然而,这将扩展到100%,所以使surt e,你将 Package 你的按钮在一定数量的列,例如,那么你知道它总是停留在3列,直到xs屏幕
aydmsdu93#
您可以为按钮大小添加自己的css属性,如下所示:
cygmwpex4#
默认引导大小类
您可以使用
btn-lg
、btn-sm
和btn-xs
类别来行程其大小。btn-block
此外,还有一个类
btn-block
,它将把你的按钮扩展到整个块。它与Bootstrap网格结合起来非常方便。例如,对于中型和大型屏幕,此代码将显示宽度等于屏幕一半的按钮;并将为小屏幕显示全宽按钮:
checkout this JSFiddle。尝试调整框架大小。
如果这还不够,您可以轻松地创建自定义类。
rkttyhzu5#
使用块级按钮,即那些跨越父级的整个宽度的按钮。您可以通过在按钮元素中添加
btn-block
类来实现这一点。此处为文档
ki0zmccv6#
只需简单地添加到类的引导代码。
第一个
pgky5nke7#
您也可以使用css属性
scale
来执行此操作或者只是构建一个类
http://jsfiddle.net/dazzafact/aj1hcsty/1/