html - 无法使用 Bootstrap 4 对齐正确的导航项以显示在响应 View 中

Question

一段时间以来，我一直在努力解决这个问题。说到 Bootstrap，我有点菜鸟，所以请允许我问一个可能很简单的问题。我正在尝试使用 bootstrap 4 创建一个导航栏，大部分菜单项位于左侧，但登录按钮位于右侧。我已经想出了一些迂回的方法(这可能是错误的)但是每当我在手机或平板电脑 View 中查看页面时，单击汉堡菜单图标时不会出现菜单的“登录”项。它出现到一定程度(认为它大约为 760 像素)，然后就从 View 中消失了。这是到目前为止的标记，我们将不胜感激。

        <a class="navbar-brand" href="#"><img src="imgs/branding/nerve logo_small.png" width="50" height="50" alt=""></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item active">
                <a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Placeholder 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Placeholder 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Placeholder 3</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Placeholder 4</a>
              </li>
            </ul> 
            </div>
           <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex"> 
                <li class="nav-item text-right">
                    <a class="nav-link " href="#">Login</a>
                </li>
            </ul>
        </nav>

Answer 1

我想，问题就出在这里

<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex"> 
                <li class="nav-item text-right">
                    <a class="nav-link " href="#">Login</a>
                </li>
            </ul>

d-none d-md-flex - 这部分意味着该元素将被隐藏(d-none)直到 768px(d-md-flex) , 然后会显示为 flex.尝试删除 d-none

已更新

最好的方法是删除独立的登录 ul 并将登录添加为全局 ul 列表的一部分。

<ul class="navbar-nav w-100">
    <li class="nav-item active">
      <a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Placeholder 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Placeholder 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Placeholder 3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Placeholder 4</a>
    </li>
    <li class="nav-item flex-sm-grow-1 text-sm-right">
        <a class="nav-link " href="#">Login</a>
    </li>
  </ul> 

在 Login li 中仔细查看 flex-sm-grow-1 text-sm-right。并且不要忘记将 w-100 添加到 ul。