html - 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 从其正常位置移动四列。