Bootstrap-Rand oben reagierend

Question

Ich habe ein Problem mit dem Ausrichten eines Bootstrap-Elements nach oben.

Dies ist der html:

<div class="container"> 
    <div class="row"> 
     <img src="image.png" class="profileimg" />" 
     <h1 class="view_name">John Doe</h1> 
    </div> 
</div> 

Und das ist die CSS:

.view_name { 
    margin-left: 170px; 
    margin-top: 0px; 
} 

Das H1-Element nicht an der Spitze nach oben ziehen. Wie kann erreicht werden, dass das Bild links und das h1 Element rechts, aber in einer Reihe ist?

Answer 1

Sie können die Boostrap-Klassen pull-left und pull-right verwenden.

https://jsfiddle.net/tejashsoni111/u5suaLgw/

<div class="container"> 
    <div class="row"> 
     <img src="image.png" class="profileimg pull-left" />" 
     <h1 class="view_name pull-right">John Doe</h1> 
     <div class="clearfix"></div> 
    </div> 
</div> 

aktualisieren

Verwenden pull-left statt pull-right im h1.

<div class="container"> 
    <div class="row"> 
     <img src="image.png" class="profileimg pull-left" /> 
     <h1 class="view_name pull-left">John Doe</h1> 
     <div class="clearfix"></div> 
    </div> 
</div> 

https://jsfiddle.net/tejashsoni111/u5suaLgw/1/