Wie platziere ich zwei Bilder nebeneinander in ein div mit Bootstrap?

Question

Ich möchte zwei Bilder nebeneinander in ein Div legen, wo beide Bilder in der Mitte div sind. Ich bin mit Bootstrap 3. plz help

hier ist mein Markup:

<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> 

Ich kann dies mit „Zeilen-Spalten“ div tun, aber ich will es tun „gut“ div verwenden.

Answer 1

Ihre img-responsive reaktionsfähige Klasse gibt Ihren Bildern eine display:block, die verhindert, dass sie zentriert werden; versuche es zu entfernen. Um sie nebeneinander zu platzieren, verwenden Sie auch das Grid-System von Bootstrap. Sie können mehr darüber hier lesen: http://getbootstrap.com/css/#grid.

Hier ist, wie Sie dies tun könnte:

können Sie sich hier mit ihm spielen: http://www.bootply.com/YSlrhJHBls

EDIT: Nach oben Text Mitte eine 12 breit col hinzufügen zu machen. Um sicherzustellen, dass die Bilder auch in der gut sind, wickeln Sie sie in einem div mit Klasse row wie folgt:

<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> 

Hier ist die aktualisierte bootply: http://www.bootply.com/TuXAsykG7e

Answer 2

Versuchen Sie diese auf Ihrem CSS:

.well img{ 
display: inline-block; 
}