如何使用bootstrap3并排的两个图像侧放置到一个div?

问题描述 投票:5回答:2

我想两个并列的像侧放置到一个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来做到这一点。

css css3 twitter-bootstrap twitter-bootstrap-3
2个回答
7
投票

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


1
投票

试试这个对你的CSS:

.well img{
display: inline-block;
}
© www.soinside.com 2019 - 2024. All rights reserved.