btn-block 按钮的引导设置高度答案

【问题标题】：Bootstrap setting height for btn-block buttonsbtn-block 按钮的引导设置高度
【发布时间】：2014-09-30 05:10:02
【问题描述】：

我的代码如下所示：

<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>

这给了我 3 个按钮，这正是我想要的。我想做的是让按钮更高。如果可能的话，我宁愿不以像素为单位指定高度，以便它可以更好地缩放到不同的屏幕尺寸。我可以将高度指定为（宽度的）比率或屏幕高度的百分比吗？

提前致谢。

【问题讨论】：

不知道为什么我对此投了反对票。这是一个真正的问题，我不知道答案，因为我是 Bootstrap 的新用户。我搜索了 Google 和 Stack Overflow 都找不到答案。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

实际上，只需在按钮上使用py-4 作为额外的类。

py-#同时在顶部和底部添加padding，你可以通过改变数字来选择多少（我认为max是4，但我可能错了）。

您可以检查所有选项 here（至少从 Bootstrap 4 开始有效）。

【讨论】：

【解决方案2】：

使用 Bootstrap 填充属性 p-。 Documentation

<a class="btn btn-default btn-block p-3" href="#">1</a>

【讨论】：

【解决方案3】：

简单且最佳的解决方案是添加顶部和底部填充。

.btn-block {
    padding: 10% 0; 
    /* define values in pixels / Percentage or em. whatever suits 
       your requirements */
}

【讨论】：

非常感谢。效果很好。当我在上面的代码中指定 10% 时，它的 10% 是多少？
它将是按钮，但它只是一个虚拟值，最好在 EM 中定义。