如何增加引导按钮的大小？

Question

例如，我已经制作了我的按钮

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

，它看起来像以下

但是我想要这样的按钮

无论文字大小如何，如何扩大引导按钮的宽度？

Answer 1

您可以尝试使用这样的btn-sm，btn-xs和btn-lg类：

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

<强> JSFIDDLE DEMO

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

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

<强> JSFIDDLE DEMO

Answer 2

bootstrap自带clas btn-lg http://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％，因此，您可以将按钮包裹在一定数量的列中，例如然后你知道它总是保持3列，直到xs屏幕

<div class="col-sm-3">
             <div class="btn btn-default btn-block">
          Active
            </div>
        </div>

Answer 3

you can add css property for button size as follow

.btn{min-width:250px;}

Answer 4

默认引导程序大小类

您可以使用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>

检查this JSFiddle。尝试调整框架大小。

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

Answer 5

使用块级按钮，这些按钮跨越父级的整个宽度 您可以通过添加btn-block类按钮元素来实现此目的。

文档here

Answer 6

只需将其添加到引导代码的类中即可。

.login
{
width: 20%;
margin-top: 39.5%;
margin-left: 35%;
}

<button type="button" class="btn btn-outline-dark btn-lg login">Login</button>