bootstrap-4导航栏，徽标位于中心，右侧为搜索图标

Question

我想在Bootstrap 4 lg屏幕上做类似enter image description here的操作，但是会遇到麻烦。我不知道如何在导航栏上划分行。这是我尝试过的：

<nav class="navbar fixed-top">
      <div class="container">

        <div class="row">
          <div class="col-md-4">
            <button class="navbar-toggler  collapsed" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
              <span class="icon-bar top-bar"></span>
              <span class="icon-bar middle-bar"></span>
              <span class="icon-bar bottom-bar"></span>
              <span class="sr-only">Toggle navigation</span>
            </button>
            <div class="navbar-collapse collapse" id="collapsingNavbar">
              <ul class="navbar-nav left">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Link <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="#" data-toggle="collapse">Link</a>
                </li>
              </ul>
            </div>
          </div>


        <div class="col-md-4 logo">
          <a href="#page-top" class="mx-auto"> <img src="images/logo.png" id="logo"></a>
        </div>

        <div class="col-md-4">
          <form class="form-inline my-2 my-lg-0 search__box">
            <input class="search__field" type="text" placeholder="Search Here" onfocus="this.placeholder = ''"
                   onblur="this.placeholder = 'Search Here'" />
            <button class="search__btn"><i class="fa fa-search fa-2x"></i></button>
          </form>
        </div>
      </div>
      </div>
    </nav>

enter image description here