如何使用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中？

回答

相关问题