我如何在不折叠的情况下使导航项向右移动

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 的填充，解决了该问题。我使用 in-line 样式来定位登录项，但这仅用于说明目的。最好将 in-line 样式转换为 class。

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

我如何在不折叠的情况下使导航项向右移动

how do i make nav-item to the right without getting collapsed

html

css

menu

navbar

bootstrap-4