为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

qq_花开花谢_0 2023-12-04 16:58:49
我已经尝试解决这个问题有一段时间了。当谈到 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>
查看完整描述

1 回答

?
达令说

TA贡献1821条经验 获得超6个赞

我想,问题就在这里


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


查看完整回答
反对 回复 2023-12-04
  • 1 回答
  • 0 关注
  • 42 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信