Bootstrap右對齊列

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從它的正常位置。