Bootstrap, Probleme beim Platzieren von Bild und Text nebeneinander in 3 Sätzen

Question

Ich habe Probleme, meine Bilder direkt links von jedem Satz von Text zu platzieren, der Text wird unterhalb des Bildes angezeigt. Ich benutze die col-md-4 so krank haben 3 Sätze von jedem Text und Bild.

.container { 
 
    float: left; 
 
    display: block; 
 
}

<div class="container"> 
 
    <!--Row with three equal columns--> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <div class="demo-content"> 
 

 
     <p> 
 
      <img src="images/squareicon.png"> 
 
      <h3>Versatile Spaces</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="demo-content bg-alt"> 
 
     <img src="images/pointericon.png"> 
 
     <h3>Central Location</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="demo-content"> 
 
     <img src="images/foodicon.png"> 
 
     <h3>Catering to Taste</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Da Sie Bootstrap verwenden Sie die Klasse pull-left auf das Bild hinzufügen können, oder die HTML zu so etwas wie dies ändern.

<img src="images/pointericon.png"> 
<h3>Central Location</h3> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 

Um so etwas wie

<div class="col-xs-4"><img src="images/pointericon.png"></div> 
<div class="col-xs-8"> 
<h3>Central Location</h3> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div> 

kein vollständiges Beispiel, aber der Text wird unten, weil Überschrift Elemente voller Breite Blockelemente sind. Ein Blockelement wird nicht gegen etwas drücken, solange es nicht schwebt. Meiner Meinung nach ist es besser, den HTML-Code zu ändern, da Sie dann kontrollieren können, ob er auf mobilen Geräten und/oder nebeneinander auf größeren Bildschirmgrößen gestapelt ist. Außerdem können Sie die img-responsive Klasse verwenden, wenn Sie möchten. Einfach das Bild zu schweben, schränkt die Möglichkeiten ein wenig ein.

Dies funktioniert und hat Leerzeichen. 100% bootstrap nein floating das Bild:

<div class="container"> 
    <!--Row with three equal columns--> 
    <div class="row"> 
    <div class="col-md-4"> 
     <div class="demo-content row"> 
     <div class="col-xs-4"> 
      <img src="//placehold.it/120"> 
     </div> 
     <div class="col-xs-8"> 
      <h3>Versatile Spaces</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
     </div> 
     </div> 
    </div> 
    <div class="col-md-4 row"> 
     <div class="demo-content bg-alt"> 
     <div class="col-xs-4"> 
      <img src="//placehold.it/120"> 
     </div> 
     <div class="col-xs-8"> 
      <h3>Versatile Spaces</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
     </div> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="demo-content row"> 
     <div class="col-xs-4"> 
      <img src="//placehold.it/120"> 
     </div> 
     <div class="col-xs-8"> 
      <h3>Versatile Spaces</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
     </div> 
     </div> 
    </div> 
    </div> 
</div>