Ciągnij w prawo obraz w pojemniku

Question

Mam logo, które chcę umieścić na prawo od mojego pojemnika w pierwszym rzędzie. Najpierw napisałem ten kod:

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

oraz logo IS po lewej stronie pierwszego rzędu z pewnymi marginesami. Teraz dodam pull-right klasę do mojego div tak:

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

i logo wyrównany do prawej strony okna przeglądarki bez marginesów. Jak umieszczam logo po prawej stronie pierwszego rzędu, tak jak po lewej stronie?

Dzięki

Answer 1

Jeśli chcesz wyciągnąć obraz w prawo trzeba wyciągnąć obraz, a nie rząd:

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

Jeśli chcesz kolumnach zamień miejscami bez zmiany kolejności s powinieneś użyć .col-*-pull-* and .col-*-push-*. Będą przestrzegać rynny kolumna:

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

Można oczywiście połączyć dwa tak dobrze.

(Nawiasem mówiąc, nie ustawiaj alt-text na "Logo" w ostatecznym projekcie, ustaw go na coś użytecznego, na przykład nazwę firmy).