Bootstrap 4 mr-auto无法正常工作

ewm0tg9j  于 7个月前  发布在  Bootstrap
关注(0)|答案(7)|浏览(91)

我有一个片段:

<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行,不工作。.

ljsrvy3e

ljsrvy3e1#

在bootstrap 5中,使用ms-auto代替ml-auto,使用me-auto代替mr-auto

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

字符串

kupeojn6

kupeojn62#

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

sxissh06

sxissh063#

MR-AUTO用于将margin-rightauto设置为不使用内容向右对齐。
您希望在col-lg-9中将内容向右对齐,因此需要使用col-lg-9将类添加到text-right。
谢谢

ao218c7q

ao218c7q4#

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

3npbholx

3npbholx5#

有时候最好使用style标签来设置style=“margin-left:auto”,然后它就可以完美地工作了。

krugob8w

krugob8w6#

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

字符串

mbskvtky

mbskvtky7#

我建议将.ml-* 和.mr-* 重命名为.ms-* 和.me-*。
https://getbootstrap.com/docs/5.3/migration/#utilities-3

相关问题