如何在bootstrap3中创建响应按钮? [英] How to create responsive buttons in bootstrap3?
本文介绍了如何在bootstrap3中创建响应按钮?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图为768px屏幕显示btn-sm,但它一直向我显示btn-xs。
I trying to display btn-sm for 768px screens but it keeps showing me btn-xs.
这是我的HTML代码
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3 col-sm-offset-3">
<button name="magnet" class="btn btn-success btn-sm btn-xs btn-lg">
<em class="glyphicon glyphicon-home"></em>
Home
</button>
<button name="magnet" class="btn btn-danger btn-sm btn-xs">
<em class="glyphicon glyphicon-download"></em>
Download
</button>
</div>
是否可以在不使用媒体查询的情况下完成此任务?
Is it possible to achieve this task without using media queries?
推荐答案
您的按钮不会只用HTML进行神奇缩放。所以你有两个选择。
Your buttons won't magically scale with HTML-only. So you've got two options.
这个是最丑陋的一个,但它符合您的需求,因为它不需要额外的媒体查询:
This one is the ugliest one, but it fit to your needs as it doesn't require additionnal media queries :
<div class="container">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3 col-sm-offset-3">
<button name="magnet" class="btn btn-success btn-xs visible-xs"><em class="glyphicon glyphicon-home"></em> Home</button>
<button name="magnet" class="btn btn-success btn-sm visible-sm"><em class="glyphicon glyphicon-home"></em> Home</button>
<button name="magnet" class="btn btn-success btn-lg visible-md visible-lg"><em class="glyphicon glyphicon-home"></em> Home</button>
<button name="magnet" class="btn btn-danger btn-xs visible-xs"><em class="glyphicon glyphicon-download"></em> Download</button>
<button name="magnet" class="btn btn-danger btn-sm visible-sm"><em class="glyphicon glyphicon-download"></em> Download</button>
<button name="magnet" class="btn btn-danger btn-lg visible-md visible-lg"><em class="glyphicon glyphicon-download"></em> Download</button>
</div>
</div>
和ya ......终于。这是执行此操作的正确方法。
And ya... finally. This is the right way to do this.
<div class="container">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3 col-sm-offset-3">
<button name="magnet" class="btn btn-success btn-autosize">
<em class="glyphicon glyphicon-home"></em>
Home
</button>
<button name="magnet" class="btn btn-danger btn-autosize">
<em class="glyphicon glyphicon-download"></em>
Download
</button>
</div>
</div>
.btn-autosize {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
@media screen and (min-width: 768px) {
.btn-autosize {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
}
@media screen and (min-width: 992px) {
.btn-autosize {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
}
这篇关于如何在bootstrap3中创建响应按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文