如何实现 Bootstrap 列之间文本段落的垂直对齐答案

【问题标题】：How to achieve vertical alignmernt of text paragraphs between Bootstrap columns如何实现 Bootstrap 列之间文本段落的垂直对齐
【发布时间】：2016-01-20 23:35:56
【问题描述】：

我使用的是相当标准的响应式 Bootstrap 网格。

让我感到困惑的任务：在一行中，我有多个列。每列都有一个标题，可能是一个图像，以及一些可变长度的文本。根据设计，文本（并且只有文本）应该有背景颜色。

此外，所有颜色区域的底部都应对齐（即在同一垂直高度）。设计师建议通过在文本中添加“彩色填充”来实现它，直到它们达到所需的最低级别。

我尝试构建一个小例子来说明它，它在这里： http://jsfiddle.net/xgrnqxpr/2/

示例代码：

<div class="container">
    <div class="row">


        <div class="span3">
          <h3>
          TEXT1
          </h3>
          <div class="g_class">
            <p>
              Short text
              Short text
            </p>
          </div>
        </div>
        <div class="span3">
          <h3>
            TEXT2
          </h3>
          <div class="r_class">
            <p>
              Long text
              Long text
              Long text
              Long text
              Long text
              Long text
              Long text
              Long text
              Long text
              Long textLong text
              Long text
              Long text
              Long text
              Long text
              Long text
              Long text
              Long text
              Long text
              Long text
            </p>
          </div>



    </div>
</div>

（您可能需要放大可见区域，以查看列结构）。显然，“绿色”区域比红色区域短。按照设计，我需要将绿色部分展开 - 直到红色部分的底部。

任何提示如何在 CSS 中实现它？

感谢您的关心。

【问题讨论】：

标签： twitter-bootstrap css

【解决方案1】：

使用 flex 的解决方案：http://jsfiddle.net/xgrnqxpr/3/

没有对 html 进行任何更改。只有css改变了，如下图。

.row {
  display: flex;
  align-items: stretch;
}
.span3 {
  display: flex;
  flex-direction: column;
}
.span3 h3 {
  flex: 0 0 auto;
}
.span3 div {
  flex: 1 0 auto;
}
.r_class {
  background-color: red;
}

.g_class {
  background-color: green;
}

css 更改有两个目标：

.row 上的display: flex; 用于通过使用align-items: stretch; 确保每个单元格具有相同的高度
.span3 上的 display: flex; 以及将 flex 属性分配给其子级的目的是确保标题不会移动，并且文本将占用所有额外的空间。

如果您想更多地使用它并了解有关 flex（和 flex 相关）属性如何工作的更多说明，我认为这是一个很好的来源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：