问题
I have the following html to build a grid with bootstrap 4.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="col-sm-12 col-md-3">
<div class="row">
<div class="col-lg-12">
here are different heights possible
</div>
</div>
<div class="row align-items-end">
<div class="col-lg-12 date">
should always be at bottom (like the fourth date)
</div>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="row">
<div class="col-lg-12">
here are different heights possible
</div>
</div>
<div class="row align-items-end">
<div class="col-lg-12 date">
should always be at bottom (like the fourth date)
</div>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="row">
<div class="col-lg-12">
here are different heights possible
here are different heights possible
here are different heights possible
</div>
</div>
<div class="row align-items-end">
<div class="col-lg-12 date">
should always be at bottom (like the fourth date)
</div>
</div>
</div>
</div>
I want to have the date always at the bottom of the second row. Maybe the picture explains the problem better. The first three dates are not in a line with the fourth date at the bottom of the flexbox:
回答1:
There is no way to equally align the content in children of separate flexbox parents. You can however make the columns also flexbox container using d-flex
and then mt-auto
(margin-top:auto
) to push the dates to the bottom of the columns.
<div class="col-sm-12 col-md-3 d-flex flex-column">
<div class="row">
<div class="col-lg-12">
here are different heights possible
</div>
</div>
<div class="row mt-auto">
<div class="col-lg-12 date">
date
</div>
</div>
</div>
Demo: https://www.codeply.com/go/gLYW7liCfc
Also see: bootstrap 4 cards - vertical alignment body with variable header line rows
回答2:
You can stretch the date
container to fill the remaining space of the row with flex:1
and align all the content to the bottom with align-items:flex-end
:-)
I've amended your example slightly below, you don't actually need to extra .row
within the wrapper
- the col-lg-12
should be all you need to wrap onto next row.
I've only added the border:white 1px solid;
so that you can see how my solution is working - you can just ignore that.
(You might need to view full screen to see the stacked elements working properly)!
.wrapper {
display: flex;
flex-direction: column;
background: #1D3159;
color: white;
}
.date {
background: #1D3159;
color: white;
flex: 1;
display: flex;
align-items: flex-end;
border:white 1px solid;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- just for this example -->
<div class="row">
<div class="col-sm-12 col-md-3 wrapper">
<div class="col-lg-12">
here are different heights possible
</div>
<div class="col-lg-12 date">
should always be at bottom (like the fourth date)
</div>
</div>
<div class="col-sm-12 col-md-3 wrapper">
<div class="col-lg-12">
here are different heights possible
</div>
<div class="col-lg-12 date">
should always be at bottom (like the fourth date)
</div>
</div>
<div class="col-sm-12 col-md-3 wrapper">
<div class="col-lg-12">
here are different heights possible here are different heights possible here are different heights possible here are different heights possible here are different heights possible
</div>
<div class="col-lg-12 date">
should always be at bottom (like the fourth date)
</div>
</div>
</div>
来源:https://stackoverflow.com/questions/54985467/all-divs-with-same-height-in-a-flexbox-with-at-the-bottom