twitter-bootstrap 在引导程序中响应地调整按钮大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19934647/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
resize buttons responsively in bootstrap
提问by Patrick
I'm using bootstrap, and the CSS is responsive, so it scales down nicely on smaller devices. However, I would like buttons to shrink too when the viewport is smaller (eg. on mobile).
我正在使用引导程序，并且 CSS 是响应式的，因此它在较小的设备上可以很好地缩小。但是，当视口较小时（例如在移动设备上），我也希望按钮缩小。
<button name="button" type="submit" id="edit_button-46" class="btn btn-default" value="edit" >Edit</button>
Basically on smaller devices, the class btn-xs should be added to all buttons.
基本上在较小的设备上，类 btn-xs 应该添加到所有按钮。
I can probably accomplish this via Jquery, but was wondering if bootstrap already had this functionality?
我可能可以通过 Jquery 完成此操作，但想知道 bootstrap 是否已经具有此功能？
回答by Zim
You could use CSS @media queries to scale the buttons accordingly..
您可以使用 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;
}
}
Demo: http://bootply.com/93706
Update for Bootstrap 4:
Bootstrap 4 responsive button size
Bootstrap 4 更新：
Bootstrap 4 响应式按钮大小
回答by Gene Parcellano
Just wanted to add another alternative. If you're using Bootstrap's LESS you can also use the mixins.
只是想添加另一种选择。如果你使用 Bootstrap 的 LESS，你也可以使用 mixins。
If you look inside Bootstrap's LESS folder (bootstrap > less > mixins)you will see the buttons.lessfile. If you open that up you will find the .button-size()mixin.
如果您查看 Bootstrap 的 LESS 文件夹( bootstrap > less > mixins)，您将看到该buttons.less文件。如果你打开它，你会找到.button-size()mixin。
Here is the mixin:
这是混合：
.button-size(
vertical padding;
horizontal padding;
font size;
line height;
border-radius
);
Here's how you dynamically create a button:
以下是动态创建按钮的方法：
You will need to pass certain parameters. It will brake if one is missing
您将需要传递某些参数。少了一个会刹车
.button-size(10px; 10px; 1em; 1.5em; 0);
Here's an example using the existing Bootstrap LESS variables:
这是使用现有 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
);
}
}
回答by Gene Parcellano
Expanding ZimSystem answer..
扩展 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;
}
}
