Bootstrap 如何增加引导按钮的大小?

dddzy1tm  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(7)|浏览(241)

比如我把我的纽扣

<div class="btn btn-default">
  Active
</div>

它看起来如下所示

但是我想有我的按钮像这样

如何在不考虑文本大小的情况下放大引导按钮的宽度?

wvyml7n5

wvyml7n51#

您可以尝试使用btn-sm、btn-xs和btn-lg类,如下所示:

.btn-xl {
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 10px;
}

您可以使用Bootstrap .btn-group-justified css类。或者您可以简单地添加:

.btn-xl {
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 10px;
    width:50%;    //Specify your width here
}

ryhaxcpt

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>
aydmsdu9

aydmsdu93#

您可以为按钮大小添加自己的css属性,如下所示:

.btn {
    min-width: 250px;
}
cygmwpex

cygmwpex4#

默认引导大小类

您可以使用btn-lgbtn-smbtn-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。尝试调整框架大小。

如果这还不够,您可以轻松地创建自定义类。

rkttyhzu

rkttyhzu5#

使用块级按钮,即那些跨越父级的整个宽度的按钮。您可以通过在按钮元素中添加btn-block类来实现这一点。
此处为文档

ki0zmccv

ki0zmccv6#

只需简单地添加到类的引导代码。
第一个

pgky5nke

pgky5nke7#

您也可以使用css属性scale来执行此操作

<button type="button" class="btn btn-primary " style="scale:1.5">Active</button>

或者只是构建一个类

.scale15{
     scale:1.5;
}

http://jsfiddle.net/dazzafact/aj1hcsty/1/

相关问题