Bootstrap Right Align Column

Question

У меня возникают проблемы с колонками Bootstrap.

Вот мой fiddle

Код

.index_heading { 
 
    background-color:black; 
 
    color:white; 
 
} 
 

 
.header_index { 
 
} 
 

 
.border { 
 
    border:1px solid red; 
 
    margin-right:100px; 
 
} 
 
.login { 
 
    margin-top:3%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row index_heading"> 
 
    <div class="col-md-6 border pull-right"> 
 
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST"> 
 
     <div class="login"> 
 
     <div class="col-xs-3"> 
 
      <input type="text" name="username" class="form-control" placeholder="username"> 
 
     </div> 
 
     <div class="col-xs-3"> 
 
      <input type="password" name="password" class="form-control" placeholder="password"><br> 
 
     </div> 
 
     <div class="col-xs-2"> 
 
      <input type="submit" name="login" value="login" class="form-control btn btn-primary"> 
 
     </div> 
 
    </div> 
 
</form> 
 
    </div> 
 
</div>

То, что я хочу для входа button, чтобы быть рядом с правой горизонтальной линии.

Я пробовал pull-right и text-right, но ни один из них не работает.

Любые решения были бы полезны.

Answer 1

Вы можете использовать column ordering для перемещения столбцов.

Так что для вас войти колонки можно использовать

<div class="col-xs-2 col-xs-push-4"> 

Который будет двигаться, что DIV над четырьмя колоннами из своего обычного места.