Bootstrap 4 mr-auto 无法正常工作

Question

我有一个片段：

\n\n

\r\n

\r\n

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">\r\n\r\n<header>\r\n  <div class="container">\r\n    <div class="row">\r\n      <div class="col-lg-3">\r\n        <div class="logo">\r\n          <img src="#" alt=" logotype">\r\n        </div>\r\n      </div>\r\n      <div class="col-lg-9">\r\n        <div class="head-buttons mr-auto">\r\n          <a href="">\xd0\xa0\xd1\x83\xd1\x81\xd1\x81\xd0\xba\xd0\xb8\xd0\xb9</a>\r\n          <div class="auth-buttons">\r\n            <button>\xd0\x92\xd0\xbe\xd0\xb9\xd1\x82\xd0\xb8</button>\r\n            <button>\xd0\xa0\xd0\xb5\xd0\xb3\xd0\xb8\xd1\x81\xd1\x82\xd1\x80\xd0\xb0\xd1\x86\xd0\xb8\xd1\x8f</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</header>

\r\n

\r\n

\r\n

\n\n

我希望 col-lg-9 该 div 中的所有内容都向右对齐。为什么mr-auto不工作？我该如何修复它？我尝试过并且justify-content-end并排，但不起作用..

\n

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将内容推到右侧。

\n\n

 <div class="row">\n    <div class="col-lg-3">\n        <div class="logo">\n            <img src="#" alt="logotype">\n        </div>\n    </div>\n    <div class="col-lg-9 d-flex">\n        <div class="head-buttons ml-auto">\n            <a href="">\xd0\xa0\xd1\x83\xd1\x81\xd1\x81\xd0\xba\xd0\xb8\xd0\xb9</a>\n            <div class="auth-buttons">\n                <button>\xd0\x92\xd0\xbe\xd0\xb9\xd1\x82\xd0\xb8</button>\n                <button>\xd0\xa0\xd0\xb5\xd0\xb3\xd0\xb8\xd1\x81\xd1\x82\xd1\x80\xd0\xb0\xd1\x86\xd0\xb8\xd1\x8f</button>\n            </div>\n        </div>\n    </div>\n </div>\n

\n\n\n\n

另一种选择是使用col-lg-auto将右列的宽度缩小到其内容。然后ml-auto在列上也可以工作。

\n\n

  <div class="row">\n      <div class="col-lg-3">\n            <div class="logo">\n                <img src="#" alt=" logotype">\n            </div>\n        </div>\n        <div class="col-lg-auto ml-auto">\n            <div class="head-buttons">\n                <a href="">\xd0\xa0\xd1\x83\xd1\x81\xd1\x81\xd0\xba\xd0\xb8\xd0\xb9</a>\n                <div class="auth-buttons">\n                    <button>\xd0\x92\xd0\xbe\xd0\xb9\xd1\x82\xd0\xb8</button>\n                    <button>\xd0\xa0\xd0\xb5\xd0\xb3\xd0\xb8\xd1\x81\xd1\x82\xd1\x80\xd0\xb0\xd1\x86\xd0\xb8\xd1\x8f</button>\n                </div>\n            </div>\n       </div>\n  </div>\n

\n\n

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

\n