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