bootstrap 3将底部与行中的3列对齐

Question

我见过这个线程，但它是 2 列 (col-md-6)，我也尝试了 jsfidlle 3 列，但第 1 列和第 2 列变成堆栈。

Bootstrap 3 Align Text To Bottom of Div

我想要的项目是

.row {
      position: relative;
  }

 .bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }

<div class="container">
    <div class="row">
        <div class="bottom-align-text col-sm-4">
            <h3>Some Text</h3>
        </div>
        <div class="col-sm-4">
            <img src="//placehold.it/600x300" alt="Logo" class="img-responsive"/>
        </div>
        <div class="bottom-align-text col-sm-4">
            <h3>Some Text</h3>
        </div>
    </div>
</div>

如何让它们都对齐底部？

Answer 1

flexbox 可以做到这一点

.row div {
  border: 1px solid red;
}

.flexy {
  display: flex;
  text-align: center;
}

.flexy .bottom-align-text {
  display: flex;
  justify-content: center;
  align-items: flex-end;

}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row flexy">
    <div class="bottom-align-text col-sm-4">
      <h3>Some Text</h3>
    </div>
    <div class="col-sm-4">
      <img src="//placehold.it/600x300" alt="Logo" class="img-responsive" />
    </div>
    <div class="bottom-align-text col-sm-4">
      <h3>Some Text</h3>
    </div>
  </div>
</div>

Answer 2

您可以将 column 1st 和 column 2nd 包装到 row 中，然后我们将有 2 列结构。查看我的 jsFiddle 演示：https://jsfiddle.net/robinhuy/kg1ykfL1/3/