Bootstrap 3-如何將圖像與其他圖像對齊，並且響應？

我是Bootstrap的新手。有人可以幫助我通過自舉中的響應性來對齊和重疊另一幅圖像上的圖像。我試過。Bootstrap 3-如何將圖像與其他圖像對齊，並且響應？

HTML: 
<div class="container"> 
<div class="row"> 
<div class="col-lg-12"> 
<img src="images/book_bg.png" class="img-responsive"/> 
<ul class="row"> 
<li class="col-lg-6"><img src="images/Desert.jpg" class="img-responsive"/></li> 
<li class="col-lg-6"><img src="images/Hydrangeas.jpg" class="img-responsive"/> </li> 
</ul> 
<ul class="row"> 
<li class="col-lg-6"><img src="images/Jellyfish.jpg" class="img-responsive"/></li> 
<li class="col-lg-6"><img src="images/Koala.jpg" class="img-responsive"/> </li> 
</ul> 
</div> 
</div> 
</div>

CSS： UL { 寬度：100％; } li { width：49％; float：left; }

問題：圖像沒有與背景對齊，如圖所示？幫助？ https://drive.google.com/file/d/0Bwyjk1QbhhGGRVZxZkgxMk5RNlk/edit?usp=sharing 此處下載圖像

來源

2014-02-13 Gagan Naidu

U可以嘗試偏移像'COL-LG-經偏置*' – Arun

圖像定位/ book_bg.png應該是背景（通過CSS），或者你應該使用絕對定位 –

嗨，感謝您的回覆。我改變了CSS的位置：絕對和它的工作正常。並且還使用col-offset，我可以將內部圖像左右移動，反之亦然。但是，要調整它的頂部/底部是否有任何可用的屬性，或者我必須簡單地使用css屬性，如（margin-top，margin-bottom，padding）？有人可以告訴我關於對齊圖像的頂部和底部。 –

在HTML中包括這一部分的ID，例如：

<img src="images/book_bg.png" class="img-responsive" id="background_image"/>

，然後添加一個CSS這個ID與一個絕對位置：

#background_image {position: absolute}

關於垂直對齊的評論：

你可以找到許多與此相關的問題。這裏有幾個例子：

Question 1 Question 2 Question 3

來源

2014-02-13 13:28:03 Tasos

@GaganNaidu我已經更新了我的答案，有幾個關於垂直對齊的鏈接。 – Tasos

Bootstrap 3-如何將圖像與其他圖像對齊，並且響應？

回答

相關問題