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

Question

例如我做了我的按钮

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

它看起来像下面这样

但是我想要这样的按钮

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

原文由 Alex Shmatko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以尝试像这样使用 btn-sm、btn-xs 和 btn-lg 类：

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

JSFIDDLE 演示

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

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

JSFIDDLE 演示

原文由 Rahul Tripathi 发布，翻译遵循 CC BY-SA 3.0 许可协议

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>

原文由 Daniel 发布，翻译遵循 CC BY-SA 3.0 许可协议