css - 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>