如何使用 bootstrap3 将两个图像并排放置到一个 div 中？答案

【问题标题】：How to place two image side by side into a div using bootstrap3?如何使用 bootstrap3 将两个图像并排放置到一个 div 中？
【发布时间】：2019-02-04 03:15:49
【问题描述】：

我想将两个图像并排放置到一个 div 中，其中两个图像都位于父 div 的中心。我正在使用引导程序 3。请帮助

这是我的标记：

    <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 来做到这一点。

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案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。为了确保图像也在井内，请将它们包装在 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

【讨论】：

它不能完美地工作，在这种情况下，图像不适合父 div（“well” div）并且 div 标题（“sister properties”）也不能留在 div 的中心。看到这个：bootply.com/PZujGdrKlc
是的，我看到了，但这不是你问题的一部分......让我看看我是否还能让它为你工作......
它工作得很好，我按照你的第一个建议删除 img-responsive 响应类解决了这个问题，谢谢 :)
很高兴我能帮上忙！ ;)

【解决方案2】：

在你的 CSS 上试试这个：

.well img{
display: inline-block;
}

【讨论】：