Question

我正在使用bootstrap4，这是我的代码，我在复选框行添加了课程mr-auto，所以我认为New use?Sign up now!应该在右边，但它不是，问题是什么？

<h1 class="text-center">Log in</h1>
<div class="row">
<div class="col-md-6 offset-md-3">
  <form action="/login" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="bhbKzszsGeADlAPkfoW4U58mGd9zfOy9mIl62R/gODqAFXevFsmTj//StPsLnrf8XpNlpkR+BHY6pgxlSlh8Og==" />
    <div class="form-group">
      <input type="text" name="email" id="email" class="form-control" placeholder="用户名/Email" autofocus="autofocus" />
    </div>
    <div class="form-group">
      <input type="password" name="password" id="password" class="form-control" placeholder="password" />
    </div>
    <input type="submit" name="commit" value="login" class="btn btn-primary btn-block" data-disable-with="login" />

    <div class="form-check mt-2 mr-auto d-inline-block">
      <label class="form-check-label p-0">
        <input type="checkbox" name="remember_me" id="remember_me" value="{:class=&gt;&quot;form-check-input &quot;}" /> Remember me
      </label>
    </div>
    <p class=" d-inline-block">New user?<a href="/signup">Sign up now!</a></p>
    </form>    
  </div>
</div>

Answer 1

它没有对齐，因为自动边距不适用于inline-block元素。
请使用float-right代替..

<form action="/login" accept-charset="UTF-8" method="post">
    <input name="utf8" type="hidden" value="✓">
    <input type="hidden" name="authenticity_token" value="bhbKzszsGeADlAPkfoW4U58mGd9zfOy9mIl62R/gODqAFXevFsmTj//StPsLnrf8XpNlpkR+BHY6pgxlSlh8Og==">
    <div class="form-group">
        <input type="text" name="email" id="email" class="form-control" placeholder="用户名/Email" autofocus="autofocus">
    </div>
    <div class="form-group">
        <input type="password" name="password" id="password" class="form-control" placeholder="password">
    </div>
    <input type="submit" name="commit" value="login" class="btn btn-primary btn-block" data-disable-with="login">

    <div class="form-check mt-2 d-inline-block">
        <label class="form-check-label p-0">
            <input type="checkbox" name="remember_me" id="remember_me" value="{:class=>&quot;form-check-input &quot;}"> Remember me
        </label>
    </div>
    <p class="float-right mt-2 d-inline-block">New user?<a href="/signup">Sign up now!</a></p>
</form>

http://www.codeply.com/go/0XCESDWKdG

Bootstrap mr-auto不起作用

1 个答案: