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中

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

这没有用，为什么在引导程序中垂直对齐这么难？

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>

无法在jumbotron底部对齐图像

1 个答案: