Bootstrap中同一行中的文本后面的图像

Question

如何查看这些图片：

在同一行，就像在这个例子中一样？

以下是我的代码（Bootstrap）在一列中的显示方式：

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3">
        <h2>We're from <br /> here</h2>
        <p>We do almost all of our work with US-based companies. More
            importantly, we have tons of personal work experience in the US. Most
            importantly, some of us regularly reside in the US. You can forget about culture clash and long-distance phone
            calls. We give you an onshore throat
            to choke.</p>
        <img src="img/city.jpg" class="img-responsive" alt="city" />
    </div>
</div>

Answer 1

基本上，你必须使columns all the same height（flexbox可以做到这一点），然后将图像（它们的高度都相同？）推到div的底部....并且flexbox有方法对于那个。

＆＃13;

＆＃13;

.row {
  display: flex;
}
.row > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border: 1px solid grey;
}
.row > div img {
  margin-top: auto;
  
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-3">
    <h2>We're from here</h2>
    <p>We do almost all of our work with US-based companies. More importantly, we have tons of personal work experience in the US. Most importantly, some of us regularly reside in the US. You can forget about culture clash and long-distance phone calls.
      We give you an onshore throat to choke.</p>
    <img src="http://lorempixel.com/image_output/food-h-c-200-400-6.jpg" class="img-responsive" alt="city" />
  </div>

  <div class="col-xs-12 col-sm-6 col-md-3">
    <h2>We're from <br /> here</h2>
    <p>Lorem ipsum dolor sit.</p>
    <img src="http://lorempixel.com/image_output/food-h-c-200-400-6.jpg" class="img-responsive" alt="city" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用p元素的适当最小高度

    .my_p {
        min-height: 400px; 
    } 

    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">
            <h2>We are from <br /> here</h2>
            <p class="my_p">We do almost all of our work with US-based companies. More
                importantly, we have tons of personal work experience in the US. Most
                importantly, some of us regularly reside in the US. You can forget about culture clash and long-distance phone
                calls. We give you an onshore throat
                to choke.</p>
            <img src="img/city.jpg" class="img-responsive" alt="city" />
        </div>
    </div>