使用引導將照片放到其他照片的底部

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

來源

2016-05-26 John Smith

對於垂直內容的每個部分，你必須創建一個新的row。

你的代碼應該是這樣的。爲了使演示變得清晰，我將用xs替換lg。

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

來源

2016-05-26 11:18:06 niyasc

這可能會實現：

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

來源

2016-05-26 11:18:22

使用引導將照片放到其他照片的底部

回答

相關問題