Question

我正在尝试将（bootstrap v4）col中的div对齐到可以具有可变高度的（bootstrap v4）行中。这是一个用于快速参考的代码库 - 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 div的底部。

我尝试在singleReccomendation上设置相对位置，并在add to bag上设置position: absolute, bottom: 0，但它似乎不起作用。我正在使用flex with bootstrap v4，我想知道解决这个问题的最佳方法是什么？谢谢！

Answer 1

如果您将display: flex; flex-direction: column;添加到.singleReccomendation，然后将margin-top: auto添加到__addToBag，那么它将在底部对齐

Updated codepen

Stack snippet

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

它应该与position: relative上的.singleRecomendation以及position: absolute上的bottom: 0 + addToBag一起使用。您只需添加填充以防止按钮与上面的文本重叠。

这是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;
      }
    }
  }
}

将单个div与行中div的底部对齐，高度可变

2 个答案: