希望这是一个简单的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
}
}
谢谢
答案 0 :(得分:1)
这里有一些很好的答案:resize buttons responsively in bootstrap
就个人而言,我喜欢使用视图宽度属性来响应按钮尺寸。
#myButton {
width: 20vw;
padding: 10px;
}
答案 1 :(得分:0)
以下是通过@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;
}
}