Question

我有一个摘要：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<header>
  <div class="container">
    <div class="row">
      <div class="col-lg-3">
        <div class="logo">
          <img src="#" alt=" logotype">
        </div>
      </div>
      <div class="col-lg-9">
        <div class="head-buttons mr-auto">
          <a href="">Русский</a>
          <div class="auth-buttons">
            <button>Войти</button>
            <button>Регистрация</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

我希望col-lg-9将该div中的所有内容对齐到右侧。为什么mr-auto不起作用？我该如何解决？我尝试过justify-content-end并排，但是没有用。

Answer 1

您应该使用float-right和d-flex类，而不是mr-auto。

Answer 2

有时最好使用 style 标签来设置 style="margin-left: auto" 然后它就完美运行了。

Answer 3

mr-auto用于设置边距为右的自动，而不使用向右对齐的内容。

您要在col-lg-9中将内容右对齐，因此您需要使用col-lg-9在class-right上添加类。

谢谢。

Answer 4

自动边距适用于Flexbox容器，但是Genymotion不是Flexbox容器。使用col-lg-9使其成为Flexbox容器，然后使用 d-flex将内容推向右侧。

ml-auto

另一种选择是使用<div class="row"> <div class="col-lg-3"> <div class="logo"> <img src="#" alt="logotype"> </div> </div> <div class="col-lg-9 d-flex"> <div class="head-buttons ml-auto"> <a href="">Русский</a> <div class="auth-buttons"> <button>Войти</button> <button>Регистрация</button> </div> </div> </div> </div>将右列的宽度缩小到其内容。然后，该列上的col-lg-auto也将起作用。

ml-auto

https://www.codeply.com/go/4n4R9cNrqE

Bootstrap 4 Mr-Auto无法正常工作

4 个答案: