html - 对齐 bootstrap col 底部的 div

Question

如何在使用 bootstrap col 时将 div 元素对齐到父元素的底部？

.wrapper {
  background-color: green;
  height: 200px;
}

.bottom {
  position: relative;
}

.bottom-div {
  height: 200px;
  position: absolute;
  bottom: 0;
}

<div class="wrapper">
  <div class="col-md-3 bottom">
    <div class="bottom-div"> TEST1 </div>
  </div>
  <div class="col-md-6">
    TEST2
  </div>
  <div class="col-md-3">
    TEST3
  </div>
</div>

底部 div 元素未在底部对齐。这样做的正确方法是什么？谢谢。

更新:Div 元素用完包装器(它基本上向上移动)

Answer 1

不确定你到底想做什么，因为@CBroe 说 flexbox 是最好的方法，但试试这个:-

/* CSS used here will be applied after bootstrap.css */
.wrapper{
    background-color:green;
    height: 200px;
    position: relative;
   
}
  
.bottom-div{
  height: 50px;
  width: 50px;
  position: absolute;
  bottom:0;
  left: 0;
  background-color: red;
}

.testclass {
     height: 100%;
}


  

<div class="wrapper">
  <div class="col-md-3 testclass">
    <div class="bottom-div">  TEST1 </div>
  </div>
  <div class="col-md-6">
     TEST2
  </div>
  <div class="col-md-3">
     TEST3
  </div>
</div>