Twitter bootstrap 3 无法在jumbotron中底部对齐图像

我正试着在一个巨型机器人里把一个img对准底部，但我想不出来

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

然后将附加类添加到包含img的DIV中

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

这不起作用，为什么在引导中垂直对齐东西如此困难？

这里有一种代码：

Css： 媒体查询设置为1200，因为我看到您正在使用col lg xx

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>

你好，世界！
这是一个简单的营销或信息网站的模板。它包括一个称为“英雄单元”的大型标注和三个支持内容。把它作为一个起点来创造更独特的东西

了解更多»

问题不在于引导。在支撑柔性箱之前，垂直居中一直是半困难的。然而，Bootstrap4允许您使用FlexBox类，这些类与列/网格系统一起工作。回到问题上来，你想要达到什么样的结果？图像将水平居中，但位于标题、文本和按钮下方？@hunter mitchell我希望图像水平居中，底部与包含标题、文本和按钮的div的一侧对齐。因此，1行2列都底部对齐。我想尝试用标题、文本和按钮来计算div的高度，然后设置图像的上边距以获得底部对齐。然而，我不知道如何获得div的高度？Bootstrap4有一个非常好的网格系统，支持flexbox。我建议您使用它（无需删除两列上的浮动并手动定位每列，以便将子项高度设置为100%）。当我有变化时，我会举一个例子。谢谢，这成功了！但我可能会开始迁移到Bootstrap 4，它似乎提供了一些更好的flexbox支持，正如@hunter-mitchell所建议的。尽管如此，我似乎失去了对水平放置的控制。文本_center什么都不做…@user13317使用justify content:center；代替文本对齐：居中；

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

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