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

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

默认Bootstrap大小类

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