Html Can'；t将右导航项目与引导4对齐，以显示在响应视图中

我想弄清楚这件事已经有一段时间了。说到引导，我有点笨，所以请允许我回答一个可能很简单的问题。 我正试图用Bootstrap4创建一个导航栏，大多数菜单项在左边，但登录按钮在右边。我想出了一些迂回的方法（这可能是错误的），但每当我在phone或tablet视图中查看页面时，单击burger菜单图标时，菜单的“登录”项不会出现。 它出现在某个点上（大约760像素），然后就从视野中消失了。 这里的标记到这一点，任何帮助将不胜感激

        <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>

我想问题就在这里

<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> 

---

在登录li中，请更仔细地查看flex-sm-grow-1 text sm right。不要忘了将w-100添加到ul。

这确实有效，谢谢！当我删除d-none时，“登录”将保持不变，而菜单的其余部分将变成汉堡风格。有没有办法让它同时崩溃，同时保持登录在最右边？你能给你的例子添加一个开放标签吗？我需要更多的信息来弄明白。我弄明白了，谢谢！我在“登录”部分添加了

，并在上面的div中添加了另一个登录名，该登录名仅在小于lg的屏幕上可见，因为当完整菜单可见时，它是隐藏的！更新了答案。为您找到了完美的解决方案，无需重复登录。这绝对是正确的，正是我所寻找的，并保持标记干净-非常感谢您的帮助！