引导4 mr-auto不能正常工作。

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>

​

我想要-lg-9所有内容在这个div对齐右。为什么mr-auto不能工作？我怎么才能修好它？我试着和justify-content-end排成一排，不工作。

Answer 1

自动边距适用于柔性箱容器，但col-lg-9不是柔性盒容器.使用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也可以工作。

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

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

Answer 2

在引导5中，使用ms-auto代替ml-auto，使用me-auto代替mr-auto。

<ul className="navbar-nav ms-auto">
<ul className="navbar-nav me-auto">

Answer 3

mr-auto是用来设置边距-右自动，而不是使用对齐内容的权利.

您希望在col-lg-9中将内容与右对齐，因此您需要将类添加到文本-右与col 9中。

谢谢。