javascript - bootstrap3 - 通过@media 切换类名

Question

我搜索通过更改分辨率进行切换的类切换。在我的情况下，当分辨率更改为 @screen-lg或@screen-md - 类应该切换到btn-lg

@screen-sm（标准）

<a class = "btn btn-default btn-sm">Button</a>

@screen-lg或@screen-md（切换）

<a class = "btn btn-default btn-lg">Button</a>

我认为一个解决方案是使用 jquery，但我需要一些帮助。请任何人都可以帮助我。还是有更简单的解决方案？

谢谢

Answer 1

您可以使用 Bootstrap 用于其媒体查询的相同断点来更改按钮的大小：

/*Default state (btn-sm styles)*/
.btn {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
/*md or lg screen (btn-lg styles)*/
@media (min-width: 992px) {
    .btn {
        padding: 10px 16px;
        font-size: 18px;
        line-height: 1.33;
        border-radius: 6px;
    }
}

注意：上面的示例会将行为应用于所有.btn元素，如果您想限制选择，可以使用自定义类

演示小提琴