使用媒体查询将CSS类设置为与BootStrap类相等 [英] Set CSS class equal BootStrap class with media query
本文介绍了使用媒体查询将CSS类设置为与BootStrap类相等的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
希望这是一个简单的CSS问题.我有以下BootStrap按钮,我希望将其缩小以适应较小的屏幕尺寸(请参见下文).本质上,我将类更改为"btn btn-default btn-xs "
Hoping this is a simple CSS question. I have the following BootStrap button which I want to make smaller for smaller screen sizes (see below). In essence I what to change the class to "btn btn-default btn-xs"
<button type="button" class="btn btn-default btn-sm" id="myButton" >
<span class="glyphicon glyphicon-envelope"></span>
</button>
我假设我必须使用媒体查询.我可以通过使用ID选择器以某种方式将我的类设置为等于引导类吗? (请参见下面的伪代码)
I assume I have to use a media query. Can I somehow set my class to be equal to the bootstrap classes by using the ID selector? ( see pseudo code below )
@media only screen and (max-width: 450px) {
#myButton {
.btn .btn-default .btn-xs // Inject magic here
}
}
谢谢
推荐答案
这是通过@media查询控制#myButton的CSS的方式.
Here is the way that you would control the css of #myButton via @media queries.
<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;
}
}
这篇关于使用媒体查询将CSS类设置为与BootStrap类相等的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文