Question

我已经看过这个帖子，但它的2列（col-md-6），我已经尝试过jsfidlle 3列，但第1列和第2列成为堆栈。

我想要的项目是

.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可以做到

＆＃13;

.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;

}

＆＃13;

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

＆＃13;

Answer 2

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

bootstraps 3对齐底部，行为3列

2 个答案: