Question

在那里打个招呼，所以即时通讯正在使用Bootstrap 4并尝试创建导航栏菜单这是我的代码

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
    </ul>
  </div>
     <ul class="navbar-nav"><li class="nav-item">Login</li></ul>
</nav>

所以我要在这里尝试的是导航栏菜单和一些项目，但我希望某些项目不折叠且同时位于右侧。

我尝试将要在切换器按钮后右移的项目移至右侧，并且该项目的运行完全符合我的要求，但是在小型设备和台式机设备中，该项目显示回左侧。

我尝试将div折叠元素之后的我想放置的项目移到右侧，但是在小型设备中会折叠。

Answer 1

此问题已解决，方法是使用bootstrap4 row和col将导航栏分为两个单独的div，并为两个单独的div填充0。我使用了嵌入式样式来放置“登录”项，但这只是出于说明目的。最好将内联样式转换为类。

 <div class="container-fluid">
    <div class="row">
        <div class="col-8 p-0">
            <nav class="navbar navbar-expand-lg navbar-light bg-light" style="height:4rem;">
                <button class="navbar-toggler" type="button" data-toggle="collapse" 
                 data-target="#navbarText" aria-controls="navbarText"           
                 aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarText">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
                    </ul>
                </div>
            </nav>
        </div>
        <div class="col-4 p-0 ">
            <nav class="navbar-nav navbar-light bg-light" style="height:4rem;">
                <ul class=" list-unstyled mr-4" style="margin-top:1rem;"> <li class=" float-right">Login</li>
                </ul>
            </nav>
        </div>
    </div>
</div>

如何在不折叠的情况下将导航项移到右侧

1 个答案: