Twitter bootstrap 将单个div与具有可变高度的行中div的底部对齐

我正在尝试对齐（bootstrap v4）行中（bootstrap v4）列中的div，该列可以具有可变高度。这是一个代码笔，供快速参考-

代码本身：

html

<div class="basket-reccomendations">
  <div class="basket-reccomendations__title col-12"><span>Know what else is great?</span></div>
  <div class="basket-reccomendations__body col-12">
    <div class="row">
      <a title="Test" class="col-6 singleReccomendation" href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Name</div>
        <div class="singleReccomendation__variant">variant</div>
        <div class="singleReccomendation__price">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
      <a title="Test" class="col-6 singleReccomendation" href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Name</div>
        <div class="singleReccomendation__variant">Charcoal</div>
        <div class="singleReccomendation__price">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
      <a title="Test" class="col-6 singleReccomendation" href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Name</div>
        <div class="singleReccomendation__price no-variant">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
      <a title="Test" class="col-6 singleReccomendation" href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Extra long name that might skew the row height - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies tellus massa, quis fringilla nunc aliquet quis. Etiam non bibendum lacus. Nullam at nibh cursus, convallis tellus id, rhoncus tellus. Mauris interdum justo nec ex interdum gravida. In hac habitasse platea dictumst. Cras vitae ex ligula. </div>
        <div class="singleReccomendation__variant">variant</div>
        <div class="singleReccomendation__price">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
    </div>
  </div>
</div>

.basket-reccomendations {
  background: #fff;
  padding: 1rem;
  margin-top: 2.5rem;

  &__title {

  }

  &__body {

    .singleReccomendation {
      text-decoration: none;

      &__wrapper {
        max-width: 20rem;
        position: relative;
        margin: 0 auto;
      }

      &__img {
        width: 15rem;
        height: 15rem;
      }

      &__brand {

      }

      &__name {

      }

      &__variant {

      }

      &__price {
        color: #000000;
      }

      &__addToBag {
        text-transform: none;
        margin-bottom: 2rem;
      }
    }
  }
}

如果你看第二行div，高度中有额外的文本，我试图实现的是将所有添加到坏BTN的内容与

singleRecomendation

div的底部对齐

---

我已尝试在singleReccomendation上设置相对位置，并在add to bag上设置位置：绝对，底部：0，但似乎不起作用。我正在使用flex和bootstrap v4，我想知道解决这个问题的最佳方法是什么？谢谢

如果添加

显示：flex；弯曲方向：立柱添加到
.singleRecomendation
中，然后将
页边距顶部：自动添加到
\uu addToBag
中，它将底部对齐


堆栈片段


.basket reccomendations{
背景：#fff；
填充：1rem；
保证金上限：2.5雷姆；
}
.basket-reccomendation\u body.singleReccomendation{
文字装饰：无；
显示器：flex；
弯曲方向：立柱；
}
.basket-reccomendation\uuu body.singleReccomendation\uuu包装{
最大宽度：20雷姆；
位置：相对位置；
保证金：0自动；
}
.basket-reccomendation\u body.singleReccomendation\u img{
宽度：15雷姆；
高度：15雷姆；
}
.basket-reccomendation\u body.singleReccomendation\u price{
颜色：#000000；
}
.basket-reccomendation\uuu body.singleReccomendation\uuuu addToBag{
文本转换：无；
边缘底部：2rem；
页边顶部：自动；
}

知道还有什么很棒吗？
如果添加
显示：flex；弯曲方向：立柱添加到
.singleRecomendation
中，然后将
页边距顶部：自动添加到
\uu addToBag
中，它将底部对齐


堆栈片段


.basket reccomendations{
背景：#fff；
填充：1rem；
保证金上限：2.5雷姆；
}
.basket-reccomendation\u body.singleReccomendation{
文字装饰：无；
显示器：flex；
弯曲方向：立柱；
}
.basket-reccomendation\uuu body.singleReccomendation\uuu包装{
最大宽度：20雷姆；
位置：相对位置；
保证金：0自动；
}
.basket-reccomendation\u body.singleReccomendation\u img{
宽度：15雷姆；
高度：15雷姆；
}
.basket-reccomendation\u body.singleReccomendation\u price{
颜色：#000000；
}
.basket-reccomendation\uuu body.singleReccomendation\uuuu addToBag{
文本转换：无；
边缘底部：2rem；
页边顶部：自动；
}

知道还有什么很棒吗？
它应该与
上的
位置：相对
和
位置：绝对
+
底部：0
一起使用
添加标签
。您只需添加一个填充，以防止按钮与上面的文本重叠

以下是css：

.basket-reccomendations {
  background: #fff;
  padding: 1rem;
  margin-top: 2.5rem;

  &__title {

  }

  &__body {

    .singleReccomendation {
      text-decoration: none;
      position: relative;
      padding-bottom: 40px;
      margin-bottom: 2rem;

      &__wrapper {
        max-width: 20rem;
        position: relative;
        margin: 0 auto;
      }

      &__img {
        width: 15rem;
        height: 15rem;
      }

      &__brand {

      }

      &__name {

      }

      &__variant {

      }

      &__price {
        color: #000000;
      }

      &__addToBag {
        text-transform: none;
        position: absolute;
        bottom: 0;
      }
    }
  }
}

它应该与
上的
位置：相对
和
位置：绝对
+
底部：0
一起工作。您只需添加一个填充，以防止按钮与上面的文本重叠

以下是css：

.basket-reccomendations {
  background: #fff;
  padding: 1rem;
  margin-top: 2.5rem;

  &__title {

  }

  &__body {

    .singleReccomendation {
      text-decoration: none;
      position: relative;
      padding-bottom: 40px;
      margin-bottom: 2rem;

      &__wrapper {
        max-width: 20rem;
        position: relative;
        margin: 0 auto;
      }

      &__img {
        width: 15rem;
        height: 15rem;
      }

      &__brand {

      }

      &__name {

      }

      &__variant {

      }

      &__price {
        color: #000000;
      }

      &__addToBag {
        text-transform: none;
        position: absolute;
        bottom: 0;
      }
    }
  }
}