在引导程序中调整按钮大小响应答案

【问题标题】：resize buttons responsively in bootstrap在引导程序中调整按钮大小响应
【发布时间】：2013-11-24 22:11:48
【问题描述】：

我使用的是引导程序，CSS 是响应式的，因此它可以在较小的设备上很好地缩小。但是，当视口较小时（例如在移动设备上），我也希望按钮缩小。

<button name="button" type="submit" id="edit_button-46" class="btn btn-default" value="edit" >Edit</button>

基本上在较小的设备上，应将 btn-xs 类添加到所有按钮。

我可能可以通过 Jquery 完成此操作，但想知道 bootstrap 是否已经具有此功能？

【问题讨论】：

标签： twitter-bootstrap responsive-design twitter-bootstrap-3

【解决方案1】：

您可以使用 CSS @media 查询来相应地缩放按钮..

@media (max-width: 768px) {
  .btn-responsive {
    padding:2px 4px;
    font-size:80%;
    line-height: 1;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .btn-responsive {
    padding:4px 9px;
    font-size:90%;
    line-height: 1.2;
  }
}

演示：http://bootply.com/93706

Bootstrap 4 更新：
Bootstrap 4 responsive button size

【讨论】：

【解决方案2】：

扩展 ZimSystem 答案..

@media (max-width: 768px) {
  .btn {
    font-size:11px;
    padding:4px 6px;
  }
}

@media (min-width: 768px) {
  .btn {
    font-size:12px;
    padding:6px 12px;
  }
}

@media (min-width: 992px) {
  .btn {
    font-size:14px;
    padding:8px 12px;
  }
}

@media (min-width: 1200px) {
  .btn {
    padding:10px 16px;
    font-size:18px;
  }
}

【讨论】：

太棒了，这完美！正是我所追求的。

【解决方案3】：

只是想添加另一种选择。如果你使用 Bootstrap 的 LESS，你也可以使用 mixins。

如果您查看 Bootstrap 的 LESS 文件夹 (bootstrap > less > mixins)，您将看到 buttons.less 文件。如果你打开它，你会发现 .button-size() mixin。

这里是混合：

.button-size(
    vertical padding;
    horizontal padding;
    font size;
    line height;
    border-radius
);

以下是动态创建按钮的方法：

您需要传递某些参数。缺一个就会刹车

.button-size(10px; 10px; 1em; 1.5em; 0);

这是一个使用现有 Bootstrap LESS 变量的示例：

    .btn {
        @media (min-width: @screen-sm-min) {
            .button-size(
                @padding-small-vertical;
                @padding-small-horizontal;
                @font-size-small;
                @line-height-base;
                @border-radius-small
            );
        }
        @media (min-width: @screen-md-min) {
            .button-size(
                @padding-large-vertical;
                @padding-large-horizontal;
                @font-size-large;
                @line-height-base;
                @border-radius-large
            );
        }
    }

【讨论】：