Tirare a destra un'immagine all'interno del contenitore

Question

Ho un logo che voglio posizionarlo nella parte destra del mio contenitore nella prima riga. Per prima cosa ho scritto questo codice:

<div class="container"> 
    <div class="row"> 
     <div class="col-md-3"> 
      <img src="../Images/logo.png" alt="Logo"/> 
     </div> 
     <div class="col-md-9"> 
     </div> 
    </div> 
</div>  

e il logo È mostrato nella parte sinistra della prima riga con alcuni margini. Ora aggiungo pull-right classe alla mia div in questo modo:

<div class="col-md-3 pull-right"> 
    <img src="../Images/logo.png" alt="Logo"/> 
</div> 

e il logo si allinea alla parte destra della finestra del browser, senza alcun margine. Come inserisco il logo sul lato destro della prima riga come lato sinistro?

Grazie

Answer 1

Se si vuole tirare l'immagine a destra è necessario tirare l'immagine, non la fila:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-6"> 
 
      <img src="../Images/logo.png" alt="Logo" class="pull-right"/> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
      Column 2 
 
     </div> 
 
    </div> 
 
</div>

Se si vuole le colonne a cambia posizione senza modificare l'ordine dei <div> s dovresti usare .col-*-pull-* and .col-*-push-*. Avranno rispetto per le grondaie delle colonne:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-6 col-xs-push-6"> 
 
      <img src="../Images/logo.png" alt="Logo"/> 
 
     </div> 
 
     <div class="col-xs-6 col-xs-pull-6"> 
 
      Column 2 
 
     </div> 
 
    </div> 
 
</div>

Ovviamente si può combinare le due cose pure.

(A proposito, non impostare l'alt-text su "Logo" nel progetto definitivo, impostarlo su qualcosa di utile, come il nome della società).