Question

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

我希望第二个div位于第一张图片的底部并居中。我是如何在图片结束后制作第二个div的html和bootstrap。我希望sec div的整个高点位于图片的底部，而不是在图片结束后。

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

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

对于垂直内容的每个部分，您必须创建一个新的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>

Answer 2

这可能有效：

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

使用bootstrap将照片放到其他照片的底部

2 个答案: