Bootstrap - 无法在导航栏中对齐 X 和 Y

Question

我想要导航栏，使公司名称在左侧，项目 X 和 Y 在右侧。 我尝试按照引导程序文档中的建议使用 justify-content-right 但它不起作用。

<header>

   <nav class="navbar navbar-expand-md fixed-top whitelight nav-masthead">
      <a class="navbar-brand gold-text font-weight-bold" href="index.php">Company Name</a>

      <!--Creates  a clickable button with a toggle icon once the screen collapses-->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse d-flex flex-row" id="navbarSupportedContent">
       <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link text-black"  style="font-size:16px; href="x.php">X <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-black" style="font-size:16px; href="y.php">Y<a>
        </li>
       </ul>
      </div>

    </nav>
  <header>

编辑：我删除了 mr-auto 类，这似乎可以解决问题！

Answer 1

您忘记关闭样式属性

<header>

   <nav class="navbar navbar-expand-md fixed-top whitelight nav-masthead">
      <a class="navbar-brand gold-text font-weight-bold" href="index.php">Company Name</a>

      <!--Creates  a clickable button with a toggle icon once the screen collapses-->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse d-flex flex-row" id="navbarSupportedContent">
       <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link text-black"  style="font-size:16px"; href="x.php">X <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-black" style="font-size:16px"; href="y.php">Y<a>
        </li>
       </ul>
      </div>

    </nav>
  <header>