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

【问题标题】：How can I increase the size of a bootstrap button?如何增加引导按钮的大小？
【发布时间】：2023-03-25 02:51:01
【问题描述】：

例如我制作了我的按钮

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

如下所示

不过我希望我的按钮是这样的

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

【问题讨论】：

有btn-xs、btn-sm和btn-lg类来控制按钮大小。
按钮上的大小由 bootstrap css 定义，此规则 .btn padding: 6px 12px; 覆盖规则或添加新规则并调整您的需求

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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

【讨论】：

【解决方案2】：

bootstrap 自带类 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>

【讨论】：

【解决方案3】：

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

.btn {
    min-width: 250px;
}

【讨论】：

【解决方案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。尝试调整框架大小。

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

【讨论】：

【解决方案5】：

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

文档here

【讨论】：

【解决方案6】：

只需简单地添加到引导代码的类中。

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

&lt;button type="button" class="btn btn-outline-dark btn-lg login"&gt;Login&lt;/button&gt;

【讨论】：

这是一个sn-p有什么意义吗？