如何使用bootstrap將兩個圖像並排放入div中？

我想將兩個圖像並排放入一個div，其中兩個圖像都居中父div。我使用的引導3. plz幫助如何使用bootstrap將兩個圖像並排放入div中？

這裏是我的標記：

<div class="well text-center"> 
     <span>Sister Properties:</span> 
      <a href="#"><img src="img/innlogo.png" class="img-responsive" alt="inn_logo" /></a> <a href="#" ><img src="img/cclogo.png" class="img-responsive" alt="ccs_logo" /></a> 
    </div>

我不能做到這一點使用「行列」分區，但我想用「井」 div來做到這一點。

來源

2014-10-30 Xubayer pantho

您的img-responsive響應式課程會爲您的圖片提供display:block，以防止它們居中;嘗試刪除它。此外，爲了使它們並排放置，使用Bootstrap的網格系統。你可以在這裏閱讀更多關於它的信息：http://getbootstrap.com/css/#grid。

這裏是你如何能做到這一點：

你可以用它在這裏玩：http://www.bootply.com/YSlrhJHBls

編輯：爲了使頂部的文本中心加12寬col。爲了確保圖像井內過，包裹他們div內側row類，如下所示：

<div class="well text-center"> 
    <div class="col-md-12">Sister Properties:</div> 
    <div class="row"> 
     <div class="col-md-6"> 
      <a href="#"><img src="http://lorempixel.com/400/200/" alt="inn_logo"></a> 
     </div> 
     <div class="col-md-6"> 
      <a href="#"><img src="http://lorempixel.com/g/400/200/" alt="ccs_logo"></a> 
     </div> 
    </div> 
</div>

這裏是更新bootply：http://www.bootply.com/TuXAsykG7e

來源

2014-10-30 08:15:45 webeno

它不能完美運行，在這種情況下，圖像不適合父div（「well」div）和div標題（「姐妹屬性」）也不能保持div的中心位置。看到這個： http://www.bootply.com/PZujGdrKlc – 2014-10-30 09:00:47

是的，我看到了，但是這不是你問題的一部分...讓我看看我是否能夠爲你工作仍然... – webeno 2014-10-30 10:06:56

只是修復它，檢查我的編輯;） – webeno 2014-10-30 10:20:30

試試這個對你的CSS：

.well img{ 
display: inline-block; 
}

來源

2014-10-30 09:20:42 nanbatman

如何使用bootstrap將兩個圖像並排放入div中？

回答

相關問題