Question

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

令我困惑的任务：连续，我有多列。每列都有一个标题，可能是一个图像，还有一些变长文本。根据设计，文本（仅文本）应具有背景颜色。

同样通过设计，所有着色区域的底部应对齐（即在相同的垂直高度）。设计师建议通过添加＆＃34;彩色填充物来实现它。到文本，直到达到所需的最低水平。

我试图建立一个说明它的小例子，它在这里： 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>

（您可能需要放大可见区域，以查看列结构）。显然，＆＃34;绿色＆＃34;面积比红色短。按照设计，我需要扩展绿色部分 - 直到红色底部。

任何提示如何在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更改有两个目标：

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

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

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

1 个答案: