Колонка Boostrap одинаковой высоты с кнопкой

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

Я удалил стиль, который вы можете передать в классе с помощью 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>