我想两个并列的像侧放置到一个div,其中两个图像中心为母公司股利。我使用的引导3. plz帮助
这里是我的标记:
<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来做到这一点。
你img-responsive
响应类使您的图像,防止它们从中心一个display:block
;尝试删除它。此外,为了让他们并排化妆用引导的网格系统放置一边。你可以阅读更多关于它在这里:http://getbootstrap.com/css/#grid。
这里是你如何能做到这一点:
<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
编辑:为了使顶部的文本中心加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
试试这个对你的CSS:
.well img{
display: inline-block;
}