我正在尝试在 (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 一起使用,想知道解决此问题的最佳方法是什么?谢谢!
最佳答案
如果你添加display: flex; flex-direction: column;
到 .singleReccomendation
然后添加 margin-top: auto
到 __addToBag
它会底部对齐
堆栈片段
.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>
关于twitter-bootstrap - 将单个 div 对齐到具有可变高度的行中的 div 底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46266639/