css – 如何使用bootstrap3将两个图像并排放入div中？

我想将两个图像并排放入div中,其中两个图像都居中于父div.我正在使用bootstrap 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>

我不能使用“row-column”div来做这个,但我想用“well”div来做.

解决方法

您的img-responsive响应类为您的图像提供了一个显示：阻止它们居中的块;尝试删除它.另外,为了将它们并排放置,可以使用Bootstrap的网格系统.你可以在这里阅读更多相关信息： 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宽的列.为确保图像在井内,请将它们包含在具有类行的div中,如下所示：

<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