Bootstrap 列与按钮高度相同答案

【问题标题】：Bootstrap Column Same Height with ButtonBootstrap 列与按钮高度相同
【发布时间】：2019-10-16 14:06:28
【问题描述】：

我有以下 HTML 代码：

<div class="row align-items-center" style="margin: 0; padding: 0;">
   <div class="col-4" style="background-color: red; margin: 0; padding: 2px;">
      <a href="#"><button style="width: 100%;">Test</button></a>
   </div>
   <div class="col-4" style="background-color: red; margin: 0; padding: 2px;">
      <img style="width: 100%;" src="resources/assets/images/square-test.png">
   </div>
   <div class="col-4" style="background-color: red; margin: 0; padding: 2px;">
      <img style="width: 100%;" src="resources/assets/images/square-test.png">
   <div>
</div>

目前它是这样显示的......

我可以为按钮高度做什么？确保它的高度始终与其他列的宽度相同。对于宽度 100% 似乎工作正常。

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

首先，请注意链接不允许有子按钮，反之亦然

要解决您的问题，只需删除 align-items-center 类，然后将按钮高度设置为 100%；

.col-4 button {
  height:100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="margin: 0; padding: 0;">
   <div class="col-4" style="background-color: red; margin: 0; padding: 2px;">
     <button style="width: 100%;">Test</button>
   </div>
   <div class="col-4" style="background-color: red; margin: 0; padding: 2px;">
      <img style="width: 100%;" src="http://www.fillmurray.com/284/196">
   </div>
   <div class="col-4" style="background-color: red; margin: 0; padding: 2px;">
      <img style="width: 100%;" src="http://www.fillmurray.com/284/196">
   <div>
</div>

【讨论】：

谢谢！我最终尝试了不同的方法，但没有取得好的结果。我应该使用带有提交按钮的表单来将该按钮用作重定向吗？谢谢
另外，当列被包裹时（即相互包裹） - 有没有办法确保按钮列与其他列保持相同的高度？
如果您要提交数据，请使用按钮。如果您要链接到某个东西，请使用链接。 - stackoverflow.com/questions/30936608/…
当然，但我希望整个专栏都可以点击，而不仅仅是链接...
如果您想要重定向，只需使用链接而不是 button 它应该仍然与 jst 一些小调整完全相同 - codepen.io/Paulie-D/pen/eYYzyEr

【解决方案2】：

我删除了你可以用bootstrap在课堂上传递的样式，试试这个：

<div class="row align-items-center m-0 p-0">
   <div class="col-4 bg-danger m-0 p-1">
      <a href="#"><button class="btn btn-dark w-100 h-100>Test</button></a>
   </div>
   <div class="col-4 bg-danger m-0 p-1">
      <img class="w-100" src="resources/assets/images/square-test.png">
   </div>
   <div class="col-4 bg-danger m-0 p-1">
      <img class="w-100" src="resources/assets/images/square-test.png">
   <div>
</div>

【讨论】：