我使用bootstrap,而且CSS是响应式的,所以它可以在较小的设备上很好地缩小。但是,当视口较小时(例如,在移动设备上),我希望按钮也缩小。
<button name="button" type="submit" id="edit_button-46" class="btn btn-default" value="edit" >Edit</button>
基本上在较小的设备上,应将btn-xs类添加到所有按钮中。
我可以通过Jquery完成这个,但是想知道bootstrap是否已经有了这个功能?
答案 0 :(得分:32)
您可以使用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的更新:
Bootstrap 4 responsive button size
答案 1 :(得分:2)
扩展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;
}
}
答案 2 :(得分:2)
只是想添加另一种选择。如果你正在使用Bootstrap的LESS,你也可以使用mixins。
如果您查看Bootstrap的LESS文件夹(bootstrap > less > mixins
),您会看到 buttons.less
文件。如果你打开它,你会发现 .button-size()
mixin。
这是mixin:
.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
);
}
}