Float Divs im Bootstrap

Question

Wie kann ich das Ergebnis erhalten, das Sie auf dem Bild sehen können? Ich die Col-md-4 divs, ich möchte die 2 divs nebeneinander. Das Symbol auf der linken Seite und Text neben dem Symbol.

Was ich versuchte, ohne irgendeine benutzerdefinierte CSS: Mit diesem Code sind die Divs unter einander, und nicht schwebend.

echo '<div class="col-md-4 elony"> 
        <div class="elony_ikon_div pull-left">'.$elony['elony_ikon'].'</div> 
        <div class="pull-right"> 
         <span class="elony_nev">'.$elony['elony_nev'].'</span> 
         <p class="elony_text">'.$elony['elony_text'].'</p> 
        </div> 
        <div class="clearfix"></div> 
       </div>'; 

enter image description here

Answer 1

Um die beiden divs nebeneinander machen bleiben u eine neue div mit der Klasse Reihe nach beginnen könnte:

echo '<div class="col-md-4 elony"> 
      <div class = "row"> 
       <div class = "col-md-6"> 
        '.$elony['elony_ikon'].' 
       </div> 
       <div class = "col-md-6"> 
        '.$elony['elony_text'].' 
       </div> 
      </div>'; 

Answer 2

Sie müssen die row Klasse hinzufügen die Umgebung zwei Gegenstände, die du nebeneinander haben willst. In diesem Fall würden Sie sehen:

<div class="col-md-4 elony"> 
    <div class="row"> <!-- add the row here --> 
     <div class="elony_ikon_div pull-left">'.$elony['elony_ikon'].'</div> 
     <div class="pull-right"> 
      <span class="elony_nev">'.$elony['elony_nev'].'</span> 
      <p class="elony_text">'.$elony['elony_text'].'</p> 
     </div> 
     <div class="clearfix"></div> 
    </div> <!-- close the row here --> 
</div> 

Answer 3

Bootstrap kann dies für Sie tun. Was Sie tun müssen, ist .col-* Elemente in andere .col-* Elemente verschachteln. Daher können Sie zwei Elemente nebeneinander in einem Element neben zwei anderen Elementen hinzufügen. Ich habe ein Grund column-nesting Codebeispiel:

Tipp: Immer Spalten innerhalb eines .row Elements Umwickeln verhindert diese Umhüllung Fehler und entfernt die äußeren Rinne der Säulen.

.box { 
 
    border: 1px solid #333; 
 
} 
 

 
.icon{ 
 
    width: 100%; 
 
    height: auto; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4 box"> 
 
     <div class="row"> 
 
     <div class="col-xs-4"><img src="https://icon.now.sh/accessibility" class="icon" alt=""></div> 
 
     <div class="col-xs-8">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-4 box"> 
 
     <div class="row"> 
 
     <div class="col-xs-4"><img src="https://icon.now.sh/accessibility" class="icon" alt=""></div> 
 
     <div class="col-xs-8">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-4 box"> 
 
     <div class="row"> 
 
     <div class="col-xs-4"><img src="https://icon.now.sh/accessibility" class="icon" alt=""></div> 
 
     <div class="col-xs-8">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>