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，但我需要一些帮助。请任何人帮助我。还是有一个更容易的解决方案？

THX

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元素，如果要限制选择，可以使用自定义类

<强> Demo fiddle

bootstrap3 - 由@media切换类名

1 个答案: