Bootstrap 4 mr-auto 无法正常工作

Answer 1

在 bootstrap 5 中，使用

ms-auto

代替

ml-auto

，使用

me-auto

代替

mr-auto

。

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

Answer 2

自动边距适用于 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

Answer 3

mr-auto 用于设置 margin-right auto 不使用内容右对齐。

您想要将 col-lg-9 中的内容向右对齐，因此您需要使用 col-lg-9 将类添加到 text-right。

谢谢你。

Answer 4

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

Answer 5

有时最好使用 style 标签来设置 style="margin-left: auto" 这样就可以完美工作了。

Answer 6

<Nav className="ms-auto"> for float-right
<Nav className="me-auto"> for float-left

Answer 7

将 .ml-* 和 .mr-* 重命名为 .ms-* 和 .me-*。

https://getbootstrap.com/docs/5.3/migration/#utilities-3