Как разместить два изображения рядом в div с помощью bootstrap?

Я хочу поместить два изображения рядом в div, где оба изображения находятся в центре родительского div. я использую bootstrap 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>

Я не могу сделать это с помощью div "строка-столбец", но я хочу сделать это с помощью "хорошо" div.

6
css css3 twitter-bootstrap twitter-bootstrap-3

2 ответов

код 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

6

попробуйте это на вашем css:

.well img{
display: inline-block;
}
1