Html btn-block 按钮的 Bootstrap 设置高度
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/25174391/
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
Bootstrap setting height for btn-block buttons
提问by comphelp
My code looks like this:
我的代码如下所示:
<div class="row">
<div class="col-xs-4">
<a class="btn btn-default btn-block" href="#">1</a>
</div>
<div class="col-xs-4">
<a class="btn btn-default btn-block" href="#">2</a>
</div>
<div class="col-xs-4">
<a class="btn btn-default btn-block" href="#">3</a>
</div>
</div>
This gives me 3 buttons across which is what I want. What I would like to do is make the buttons taller. If at all possible I'd prefer not to specify heights in pixels so that it can scale to different screen sizes better. Could I perhaps specify the height as a ratio (of the width) or a percentage of screen height?
这给了我 3 个按钮,这正是我想要的。我想做的是使按钮更高。如果可能的话,我宁愿不以像素为单位指定高度,以便它可以更好地缩放到不同的屏幕尺寸。我可以将高度指定为(宽度的)比率或屏幕高度的百分比吗?
Thanks in advance.
提前致谢。
回答by Nishant
The simple & best solution would be to add top and bottom padding.
简单且最佳的解决方案是添加顶部和底部填充。
.btn-block {
padding: 10% 0;
/* define values in pixels / Percentage or em. whatever suits
your requirements */
}
回答by Lubo? Mi?atsky
Use Bootstrap padding property p-. Documentation
使用 Bootstrap 填充属性 p-。 文档
<a class="btn btn-default btn-block p-3" href="#">1</a>