CSS 如何使用bootstrap3将两个图像并排放置到div中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26647890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to place two image side by side into a div using bootstrap3?
提问by Xubayer pantho
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 中，其中两个图像都位于父 div 的中心。我正在使用引导程序 3。请帮助
here is my markup:
这是我的标记：
<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>
I cant do this using "row-column" div but i want to do it using "well" div.
我不能使用“行列”div 来做到这一点，但我想使用“井”div 来做到这一点。
回答by webeno
Your img-responsiveresponsive class gives your images a display:blockthat 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.
您的img-responsive响应类为您的图像提供了一个display:block防止它们居中的方法；尝试删除它。此外，为了将它们并排放置，请使用 Bootstrap 的网格系统。您可以在此处阅读更多相关信息：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>
You can play with it here: http://www.bootply.com/YSlrhJHBls
你可以在这里玩它：http: //www.bootply.com/YSlrhJHBls
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 divwith class rowas follows:
编辑：要使顶部文本中心添加 12 宽col。为确保图像也在井内，请将它们包装在divwith 类中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>
Here is the updated bootply: http://www.bootply.com/TuXAsykG7e
这是更新的 bootply：http: //www.bootply.com/TuXAsykG7e
回答by batMask
Try this on your css:
在你的 css 上试试这个：
.well img{
display: inline-block;
}
