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

Question

我想将两个图像并排放入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来做.

Answer 1

您的img-responsive响应式课程会为您的图像提供一个display:block防止它们居中的图像; 尝试删除它.另外,为了将它们并排放置,可以使用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宽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>

这是更新的bootply:http://www.bootply.com/TuXAsykG7e