twitter-bootstrap - 如何实现 Bootstrap 列之间文本段落的垂直对齐

Question

我使用的是相当标准的响应式 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 中实现它？

谢谢关心。

Answer 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 更改有两个目标:

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

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