无法在超大屏幕中底部对齐图像

Question

我正在尝试在超大屏幕中底部对齐 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>

我尝试将以下内容添加到 CSS

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

然后将额外的 class 添加到包含 img

的 DIV

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

这没用，为什么在 bootstrap 中垂直对齐东西这么难？

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>

无法在超大屏幕中底部对齐图像

Cannot bottom align image in jumbotron

vertical-alignment

twitter-bootstrap-3