无法使用 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"> 

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