无法使用 Bootstrap 4 对齐正确的导航项以显示在响应式视图中

Question

我已经尝试解决这个问题有一段时间了。当谈到 Bootstrap 时，我有点菜鸟，所以请允许我回答一个可能简单的问题。我正在尝试使用 bootstrap 4 创建一个导航栏，大部分菜单项位于左侧，但登录按钮位于右侧。我想出了一些迂回的方法（这可能是错误的），但是每当我在手机或平板电脑视图中查看页面时，当单击汉堡菜单图标时，菜单的“登录”项不会出现。它出现到一定程度（认为大约为 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>

Answer 1

我想，问题就在这里<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item text-right">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link " href="#">Login</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>d-none d-md-flex - 这部分意味着，该元素将被隐藏（d-none）直到768px（d- md -flex），然后将显示为flex。尝试删除d-none更新最好的方法是删除独立的登录 ul 并将登录添加为全局 ul 列表的一部分。<ul class="navbar-nav w-100">&nbsp; &nbsp; <li class="nav-item active">&nbsp; &nbsp; &nbsp; <a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; <a class="nav-link" href="#">Features</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; <a class="nav-link" href="#">Placeholder 1</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; <a class="nav-link" href="#">Placeholder 2</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; <a class="nav-link" href="#">Placeholder 3</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; <a class="nav-link" href="#">Placeholder 4</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li class="nav-item flex-sm-grow-1 text-sm-right">&nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link " href="#">Login</a>&nbsp; &nbsp; </li>&nbsp; </ul>&nbsp;仔细查看Login li 中的flex-sm-grow-1 text-sm-right。并且不要忘记将w-100添加到 ul。