html - pull-right bootstrap 改变显示的 div 顺序

Question

我需要以我放置的方式显示 div，但是当我尝试添加 pull-right 时，div 顺序发生了变化。我需要最右边的登录按钮，但这在两个输入框的左边。我正在尝试将两个文本框留给登录按钮。

我知道 pull-right 使 div 向右浮动，但是有什么方法可以让我优先考虑将 div 放置在其右侧的顺序吗？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>

<div class="row" style="background-color: #332619; color: #fff !important; padding-top: 25px; padding-bottom: 10px; margin-left:0px; margin-right:0px">
  <div id="sellerLoginBox" class="col-lg-6 col-lg-offset-6">
    <div class="form-group pull-right">
      <input type="text" class="form-control" id="login_Email" placeholder="Email">
    </div>
    <div class="form-group  pull-right">
      <input type="password" class="form-control" id="login_Password" placeholder="Password">
    </div>
    <div class="form-group  pull-right">
      <button id="LoginButton" class="btn btn-success btn-flat">Login</button>
    </div>
  </div>
  <div class="col-lg-6 col-lg-offset-6">
    <span class="pull-right"> <a href="#" class="forgetPassword">forgot password ?</a></span>
  </div>
</div>

fiddle 在下面

http://jsfiddle.net/mnzp54fm/1/

Answer 1

要解决这个问题，请将所有前 3 个 div，即:电子邮件、密码和登录按钮包装在另一个 div 中，然后将该 div 向右拉，然后删除这 3 个 div 中的 pull right

<div class="row" style="background-color: #332619; color: #fff !important; padding-top: 25px; padding-bottom: 10px; margin-left:0px; margin-right:0px">
  <div id="sellerLoginBox" class="col-lg-6 col-lg-offset-6">
    <div class="pull-right">
      <div class="form-group">
        <input type="text" class="form-control" id="login_Email" placeholder="Email">
      </div>
      <div class="form-group">
        <input type="password" class="form-control" id="login_Password" placeholder="Password">
      </div>
      <div class="form-group">
        <button id="LoginButton" class="btn btn-success btn-flat">Login</button>
      </div>
    </div>
  </div>
  <div class="col-lg-6 col-lg-offset-6">
    <span class="pull-right"> <a href="#" class="forgetPassword">forgot password ?</a></span>
  </div>
</div>