Question

我正在修改一个示例导航栏，我只打算将其用于网站的移动版本，但是，右侧文本不会完全浮动到右侧，并且在链接折叠时，集中化的品牌不再是中心。

在链接折叠到汉堡菜单中后，我想保持品牌居中，并在右侧添加右侧文字。

HTML：

<nav class="navbar navbar-dark navbar-expand-xl bg-success justify-content-between">
     <div class="container-fluid">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
             <span class="navbar-toggler-icon"></span>
         </button>
      <div class="navbar-collapse collapse dual-nav w-50 order-1 order-md-0">
 <ul class="navbar-nav">
     <li class="nav-item active">
         <a class="nav-link pl-0" href="#">Home <span class="sr-only">Home</span></a>
          </li>
          <li class="nav-item">
               <a class="nav-link" href="#">Link</a>
           </li>
               <li class="nav-item">
               <a class="nav-link" href="//codeply.com">Codeply</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
        <a href="/" class="navbar-brand mx-auto d-block text-center order-0 order-md-1 w-25">Brand</a>
        <div class="dual-nav w-50 order-2">
            <ul class="nav navbar-nav ml-auto">
                <li class="nav-item"><a class="nav-link" href="">float me right</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

我重新配置了您的一些物品。希望这可以帮助。

.navbar-toggler {
  left: 15px;
  position: absolute;
  top: 7px;
}

.navbar-right a {
  position: absolute;
  right: 0;
  top: 10px;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-dark navbar-expand-xl bg-success justify-content-between">
  <div class="container-fluid">
    <a href="/" class="navbar-brand mx-auto d-block text-center order-0 order-md-1 w-25">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="navbar-collapse collapse dual-nav w-50 order-1 order-md-0">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link pl-0" href="#">Home <span class="sr-only">Home</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="//codeply.com">Codeply</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
    <div class="navbar-right"><a class="nav-link" href="">float me right</a></div>

  </div>
</nav>

Answer 2

尝试将justify-content: end;应用到nav选择器的CSS或使用jQuery将justify-content-end类添加到nav。

链接折叠时如何将导航项向右浮动

2 个答案: