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>

Answer 2

我删除了您可以在function save() { // Parse through the dirtied cells for(d in dirtyCells) { var dirtiedRow = dirtyCells[d].row; failures = //Gets the failure array if(failures.length>0){ alert("Mandatory fields are not entered"); grid.gotoCell(dirtyCells[d].row, dirtyCells[d].cell); // This is to set the focus on the errored cells window.frames[0].stop(); } else{ //Continue with the save operation } 课堂上传递的样式，请尝试以下操作：

bootstrap