ブートストラップ右揃えの列

Question

ブートストラップ列に問題があります。ここで

は、私が欲しい私の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あなたは列を移動することができます。あなたは、通常の場所からの4つの列の上にそのdiv要素を移動します

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

を使用することができ、列にログインするためのだから、

。