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>

小提琴在下面

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

Answer 1

要解决这个问题，请将所有前3个div包装起来：电子邮件，密码和登录按钮放在另一个div中，然后将该div拉到右边，并在这3个div中向右移除，如下所示

<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>

右拉自举改变显示的div顺序

1 个答案: