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

我希望这个 div 中的 col-lg-9 所有内容都右对齐。为什么 mr-auto 不工作？我该如何解决？我试过 justify-content-end 在行上，不工作..

原文由 Mafys Grif 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

自动边距适用于 flexbox 容器，但 col-lg-9 不是 flexbox 容器。使用 d-flex 使其成为flexbox容器，然后 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

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

In bootstrap 5, use ms-auto instead of ml-auto and me-auto instead of mr-auto .

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

原文由 Amir Khan 发布，翻译遵循 CC BY-SA 4.0 许可协议