如何使用bootstrap3将两个图像并排放置到div中? [英] How to place two image side by side into a div using bootstrap3?
问题描述
我想将两个图像并排放置在div中,其中两个图像都位于父div的中心。我正在使用bootstrap3。plz help
i want to place two image side by side into a div where both images are center into parent div. i am using bootstrap 3. plz help
这是我的标记:
<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>
我不能使用 row-column div来做到这一点,但我想使用 well来做到这一点div。
I cant do this using "row-column" div but i want to do it using "well" div.
推荐答案
您的 img响应式
响应式类为您的图像提供了一个 display:block
阻止它们居中;尝试将其删除。另外,为了使它们并排放置,请使用Bootstrap的网格系统。您可以在此处了解更多信息: http://getbootstrap.com/css/#grid 。
Your img-responsive
responsive class gives your images a display:block
that prevents them from centering; try removing it. Also, in order for them to be placed side by side make use of Bootstrap's grid system. You can read more about it here: http://getbootstrap.com/css/#grid.
在这里您可以执行以下操作:
Here is how you could do this:
<div class="well text-center">
<span>Sister Properties:</span>
<div class="col-md-6">
<a href="#"><img src="img/innlogo.png" alt="inn_logo" /></a>
</div>
<div class="col-md-6">
<a href="#" ><img src="img/cclogo.png" alt="ccs_logo" /></a>
</div>
</div>
您可以在此处使用它: http://www.bootply.com/YSlrhJHBls
You can play with it here: http://www.bootply.com/YSlrhJHBls
编辑:顶部的文本中心添加12个宽的 col
。为了确保图像也位于井内,请将它们包裹在 row
类的 div
内,如下所示:
EDIT: To make the top text center add a 12 wide col
. To ensure the images are inside the well too, wrap them inside a div
with class row
as follows:
<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
Here is the updated bootply: http://www.bootply.com/TuXAsykG7e
这篇关于如何使用bootstrap3将两个图像并排放置到div中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!