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

新手上路,请多包涵

例如我做了我的按钮

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

它看起来像下面这样

在此处输入图像描述

但是我想要这样的按钮

在此处输入图像描述

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

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

阅读 234
2 个回答

你可以尝试像这样使用 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 许可协议

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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题