html - Bootstrap 列与按钮高度相同

Question

我有以下 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% 似乎工作正常。

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