使用媒体查询将CSS类设置为等于BootStrap类[重复]答案

【问题标题】：Set CSS class equal BootStrap class with media query [duplicate]使用媒体查询将CSS类设置为等于BootStrap类[重复]
【发布时间】：2017-12-16 04:03:44
【问题描述】：

希望这是一个简单的 CSS 问题。我有以下 BootStrap 按钮，我想将其缩小以适应较小的屏幕尺寸（见下文）。本质上，我将类更改为“btn btn-default btn-xs”

<button type="button" class="btn btn-default btn-sm" id="myButton" >
    <span class="glyphicon glyphicon-envelope"></span>
</button>

我假设我必须使用媒体查询。我可以通过使用 ID 选择器以某种方式将我的类设置为等于引导类吗？（见下面的伪代码）

@media only screen and (max-width: 450px) {

    #myButton {
        .btn .btn-default .btn-xs // Inject magic here
    }
}

谢谢

【问题讨论】：

不确定是否重复。我看到的答案为不同的媒体尺寸创建了自己的 CSS。我想知道是否有办法通过 id 选择器以某种方式分配它们，从而仍然使用默认的 BootStrap CSS 类，例如 sm 和 xs。

标签： css twitter-bootstrap media-queries

【解决方案1】：

您的问题在这里有一些很好的答案：resize buttons responsively in bootstrap

就我个人而言，我喜欢使用视图宽度属性来调整按钮大小。

#myButton {
    width: 20vw;
    padding: 10px;
    }

【讨论】：

谢谢，这个链接很有用

【解决方案2】：

这是您通过@media 查询控制#myButton 的css 的方式。

<button type="button" class="btn btn-default btn-sm" id="myButton" >
    <span class="glyphicon glyphicon-envelope"></span>
</button>

@media only screen and (max-width: 450px) {

    #myButton {
        font-size: 12px;
    }
}

@media only screen and (max-width: 768px) {

    #myButton {
           font-size: 16px; 
    }
}

【讨论】：

谢谢，这对我有用。