使用引导将照片放在另一张照片的底部

Question

我是html和bootstrap的新手，我需要一点帮助。我有一张div col-lg-12 中有 100% 的照片，我想在左边放另一个带有照片的div，在右边放一个段落。

第二个div我想在第一张图片的底部并居中。我如何制作 html 并引导第二个div 是在图片结束后。我希望 secdiv 的整个高点都在图片底部，而不是在图片结束后。

我尝试使用绝对位置，但无法做出响应。请有人给我一个主意。

.HTML

<div class="container main-container">  
<div class=" top">
    <div class="row-fluid">
        <div class="col-lg-12">
            <img src="images/header.jpg" alt="#" />
            <div class="row">   
                <div class="photo col-lg-2 col-lg-offset-2">
                    <img src="images/best_friends_logo.png" alt="#" />
                </div>
                <div class="info col-lg-8">
                    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus velit nec sagittis mattis. Sed et tellus blandit turpis vulputate eleifend. </h1>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

这可能有效：

<div class="container main-container">  
<div class=" top">
    <div class="row-fluid">
        <div class="col-lg-12">
            <img src="images/header.jpg" alt="#" />
        </div>
          <div class="col-lg-12">   
                <div class="photo col-lg-2 col-lg-offset-2">
                    <img src="images/best_friends_logo.png" alt="#" />
                </div>
                <div class="info col-lg-8">
                    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus velit nec sagittis mattis. Sed et tellus blandit turpis vulputate eleifend. </h1>
                </div>
            </div>
    </div>
</div>
</div>

Answer 2

对于垂直内容的每个部分，您必须创建一个新row。

你的代码应该是这样的。为了从演示中清楚地说明问题，我将lg替换为xs。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-xs-12">
    <img class="img-responsive" src="https://placehold.it/2048x128" alt="#" />
  </div>
</div>
<div class="row">
  <div class="photo col-xs-4">
    <img class="img-responsive" src="https://placehold.it/512x1024" alt="#" />
  </div>
  <div class="info col-xs-8">
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus velit nec sagittis mattis. Sed et tellus blandit turpis vulputate eleifend. </h1>
  </div>
</div>
  </div>