不能底部对齐图像在jumbotron

Question

我想在底部对齐img在jumbotron中，但无法弄清楚。

<div class="jumbotron"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-8"> 
       <h1>Hello, world!</h1> 
       <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> 
       <p><a class="btn btn-primary btn-lg">Learn more »</a></p> 
      </div> 
      <div class="col-lg-4 text-center"> 
       <img src="http://via.placeholder.com/200x200"> 
      </div> 
     </div> 
    </div> 
</div> 

我尝试添加以下的CSS

.vertical-bottom { 
    display: flex; 
    align-items: bottom; 
} 

然后将包含IMG

<div class="col-lg-4 text-center vertical-bottom"> 

这不起作用增加的附加类的DIV，为什么很难在引导中垂直对齐的东西？

Answer 1

这里有种代码：

Bootply

的CSS： 媒体查询设置为1200，因为我看到你正在使用COL-LG-XX

@media screen and (min-width:1200px) { 
    .flex_container img{ 
     object-fit: contain; 
     object-position: 100% 100%; 
    } 
    .flex_container { 
    display: flex; 
    } 
} 

Html：

<div class="jumbotron"> 
    <div class="container"> 
     <div class="row flex_container"> 
      <div class="col-lg-8"> 
       <h1>Hello, world!</h1> 
       <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> 
       <p><a class="btn btn-primary btn-lg">Learn more »</a></p> 
      </div> 
      <div class="col-lg-4 text-center flex_container"> 
       <img src="http://via.placeholder.com/200x200" style=""> 
      </div> 
     </div> 
    </div> 
</div>