twitter-bootstrap - 将单个 div 对齐到具有可变高度的行中的 div 底部

Question

我正在尝试在 (bootstrap v4) 行内的 (bootstrap v4) col 内对齐一个 div，该行可以具有可变高度。这是一个供快速引用的代码笔 - https://codepen.io/ajmajma/pen/veNRdY

和代码本身:

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>

CSS (scss)

.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 的第二行 - 高度中有额外的文本，而我想要实现的是让所有添加到坏 btns 的内容与 singleReccomendation 的底部对齐分区

我已经尝试在 singleReccomendation 上设置相对位置，在添加到包上设置 position: absolute, bottom: 0 但它似乎不起作用。我将 flex 与 bootstrap v4 一起使用，想知道解决此问题的最佳方法是什么？谢谢!

Answer 1

如果你添加display: flex; flex-direction: column; 到 .singleReccomendation 然后添加 margin-top: auto 到 __addToBag 它会底部对齐

Updated codepen

堆栈片段

.basket-reccomendations {
  background: #fff;
  padding: 1rem;
  margin-top: 2.5rem;
}
.basket-reccomendations__body .singleReccomendation {
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.basket-reccomendations__body .singleReccomendation__wrapper {
  max-width: 20rem;
  position: relative;
  margin: 0 auto;
}
.basket-reccomendations__body .singleReccomendation__img {
  width: 15rem;
  height: 15rem;
}
.basket-reccomendations__body .singleReccomendation__price {
  color: #000000;
}
.basket-reccomendations__body .singleReccomendation__addToBag {
  text-transform: none;
  margin-bottom: 2rem;
  margin-top: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

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