在引导程序中相应地调整按钮的大小
在引导程序中相应地调整按钮的大小
提问于 2013-11-13 00:32:12
我使用的是bootstrap，而CSS是响应式的，所以它在较小的设备上可以很好地缩小。然而，我希望按钮缩小时，视口是较小的(例如。在移动设备上)。
<button name="button" type="submit" id="edit_button-46" class="btn btn-default" value="edit" >Edit</button>基本上，在较小的设备上，类btn-xs应该添加到所有按钮。
我可能可以通过Jquery来实现这一点，但是我想知道bootstrap是否已经有了这个功能？
回答 3
Stack Overflow用户
发布于 2013-11-13 02:55:11
您可以使用CSS @media查询来相应地缩放按钮。
@media (max-width: 768px) {
.btn-responsive {
padding:2px 4px;
font-size:80%;
line-height: 1;
}
}
@media (min-width: 769px) and (max-width: 992px) {
.btn-responsive {
padding:4px 9px;
font-size:90%;
line-height: 1.2;
}
}Bootstrap 4的更新：
Stack Overflow用户
发布于 2016-09-18 04:43:07
扩展ZimSystem答案..
@media (max-width: 768px) {
.btn {
font-size:11px;
padding:4px 6px;
}
}
@media (min-width: 768px) {
.btn {
font-size:12px;
padding:6px 12px;
}
}
@media (min-width: 992px) {
.btn {
font-size:14px;
padding:8px 12px;
}
}
@media (min-width: 1200px) {
.btn {
padding:10px 16px;
font-size:18px;
}
}Stack Overflow用户
发布于 2016-12-09 03:02:16
只是想增加另一个选择。如果你使用的是Bootstrap's LESS，你也可以使用mixins。
如果你查看Bootstrap的LESS文件夹(**bootstrap > less > mixins**)，你会看到buttons.less文件。如果你打开它，你会发现.button-size()混合。
这里是：
.button-size(
vertical padding;
horizontal padding;
font size;
line height;
border-radius
);下面是如何动态创建按钮的：
您将需要传递某些参数。如果少了一个，它就会刹车
.button-size(10px; 10px; 1em; 1.5em; 0);下面是一个使用现有Bootstrap LESS变量的示例：
.btn {
@media (min-width: @screen-sm-min) {
.button-size(
@padding-small-vertical;
@padding-small-horizontal;
@font-size-small;
@line-height-base;
@border-radius-small
);
}
@media (min-width: @screen-md-min) {
.button-size(
@padding-large-vertical;
@padding-large-horizontal;
@font-size-large;
@line-height-base;
@border-radius-large
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19934647
复制相关文章
相似问题