Twitter bootstrap 在引导中相应地调整按钮大小

我使用的是bootstrap，CSS响应迅速，因此在较小的设备上可以很好地缩小规模。但是，当视口变小时（例如在移动设备上），我希望按钮也缩小

编辑

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

---

我可能可以通过Jquery实现这一点，但我想知道bootstrap是否已经具备了这一功能？

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

@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;
  }
}

演示：

引导程序4的更新：

扩展系统答案

---

只是想增加另一个选择。如果您使用的是Bootstrap's LESS，那么也可以使用mixin

如果查看引导程序的LESS文件夹（

Bootstrap>LESS>mixins

），您将看到

按钮.LESS

文件。如果打开它，您将发现

.button-size（）

混合

---

这是混音：

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

---

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

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

您需要传递某些参数。如果少了一个，它就会刹车

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

---

下面是一个使用现有无引导变量的示例：

    .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
            );
        }
    }

---

太棒了，这真是太棒了！正是我想要的。

    .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
            );
        }
    }