对齐bootstrap col 1底部的单个Div

Question

所以我试着在底部制作相关的盒子，并与下一个bootstrap div的高度对齐，这就是名片部分

sort / filter div应该保持在顶部，因为它们是粘性div。滚动时它们会粘住。

结构如下：

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div id="filter-panels">
      </div>

      <div id="related-services">
      </div>
    </div>

    <div class="col-xs-12">
      <div id="business-cards">
      </div>
    </div>
  </div>
</div>

#related-services div必须位于网格的底部...并且必须与最后一张名片对齐，#filter-panels div必须保持在顶部，因为它是一个粘性div

我尝试将以下内容添加到.col-xs-12 div ...

display: inline-block;
vertical-align: bottom;
float: none

#related-services div确实停留在底部，但#filter-panels div仍然位于底部，这不是我预期的......

Answer 1

这可以使用flexbox来解决。

诀窍是将display: flex提供给 容器和两列。然后，您可以将flex-direction: column与justify-content: space-between结合使用，从而对齐左侧列的两个组成部分：

＆＃13;

＆＃13;

.container {
  display: flex;
}

.left,
.right {
  display: flex;
  width: 50%;
}

.left {
  flex-direction: column;
  justify-content: space-between;
}

#filter-panels,
#related-services {
  border: 1px solid red;
  height: 50px;
  width: 100%;
}

#business-cards {
  border: 1px solid black;
  height: 200px;
  width: 100%;
}

＆＃13;

<div class="container">
  <div class="left">
    <div id="filter-panels">Filter panels</div>
    <div id="related-services">Related services</div>
  </div>
  <div class="right">
    <div id="business-cards">Business cards</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！ ：）