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

Question

Я хочу разместить два изображения бок о бок в 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> 

Я не могу сделать это с помощью «строки-столбца» Див, но я хочу сделать это с помощью «хорошо» DIV.

Answer 1

Ваш отзыв img-responsive отзывчивый класс дает вашим изображениям display:block, что предотвращает их центрирование; попробуйте удалить его. Кроме того, для того, чтобы они были размещены бок о бок, используйте систему сетки Bootstrap. Подробнее об этом можно узнать здесь: http://getbootstrap.com/css/#grid.

Вот как вы можете сделать это:

Вы можете играть с ним здесь: http://www.bootply.com/YSlrhJHBls

EDIT: Для того, чтобы верхний текстовый центр добавить 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

Answer 2

Попробуйте это на CSS:

.well img{ 
display: inline-block; 
}