Bootstrap NavBar对齐（带有响应菜单的3列）

Question

我基本上有一个非常简单的问题，但是如果我可以进行简单的添加，我的投资组合将会看起来更好。

我希望引导程序中的NavBar位于3列中，基本上就像我在下面模拟的图像一样。

我目前具有基本的引导程序navBar设置，其默认代码如下：

<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-white fixed-top">
  <div class="container">

    <a class="nav-link" href="#">my name goes here</a>      

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a class="nav-link" href="#">about</a></li>
        <li class="nav-item"><a class="nav-link" href="#">resume</a></li>
      </ul>
    </div>

  </div>
</nav>

我可以使一个奇怪的版本看起来恰到好处地与填充和其他内容混淆在一起，但是我不想要那样。对我而言，最难的部分是理解响应式版本，将左侧的一个链接（工作）和右侧的两个链接（关于简历）合并为一个下拉导航，并让“我的名字在这里”成为标题在手机上面。

任何帮助，或者指向正确方向的点都很好。

此外，可以假设我的CSS是基本的引导CSS。

谢谢

更新

<!-- Navigation -->
<nav class="navbar navbar-light navbar-expand-md 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="#">work <span class="sr-only">work</span></a>
            </li>
        </ul>
    </div>
    <a href="/" class="navbar-brand mx-auto d-block text-center order-0 order-md-1 w-25">Colin Grant</a>
    <div class="navbar-collapse collapse dual-nav w-50 order-2">
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link" href="">about</a></li>
            <li class="nav-item"><a class="nav-link" href="">resume</a></li>
        </ul>
    </div>
</div>

这似乎很好用，任何更好的秘诀呢？

谢谢

Answer 1

以下是我如何使用引导程序4进行的操作。当屏幕尺寸小于992px时，导航栏的右侧将折叠为一个按钮。

process.env