[解決済み] Bootstrap 4 の mr-auto が正しく動作しない。

質問

スニペットを持っています。

<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 のコンテンツをすべて右寄せにしたい。なぜ mr-auto は機能しないのですか？どうすれば直せますか？試しに justify-content-end を行に追加しても、うまくいきません。

解決方法を教えてください。

自動マージンはフレックスボックスコンテナで機能しますが col-lg-9 はフレックスボックスのコンテナではありません。使用する d-flex を使用してフレックスボックスコンテナにし、次に 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