Bootstrap 导航栏品牌左侧，可折叠图标在中心，单个项目在右侧

Question

我这几天一直在尝试这样做，但没有任何完整的结果，我一直在尝试这里提出的其他问题的代码，但什么也没有。我希望我的导航栏品牌在左侧，一些图标在中间，一个图标在右侧，我希望它们都是可折叠的。我尝试了所有方法，但 flexbox 在可折叠 div 上对我不起作用，我唯一能做并且最接近我的目标的是：

<nav class="navbar navbar-expand-lg bg-bee navbar-bee justify-content-between" role="navegador">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler ml-auto" type="button" data-target="#navegador" data-toggle="collapse" aria-label="Expandir navegador" aria-expanded="false">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-nav">
    <a data-toggle="tooltip" data-placement="bottom" title="Comprar" class="d-none d-lg-block nav-item nav-link rounded" href="#"><span class="far fa-handshake icon-nav"></span></a>
    <a data-toggle="tooltip" title="Vender" class="d-none d-lg-block nav-item nav-link rounded" href="#"><span class="fas fa-hand-holding-usd icon-nav"></span></a>
    <a data-toggle="tooltip" title="Mi carrito" class="d-none d-lg-block nav-item nav-link rounded" href="#"><span class="fas fa-shopping-cart icon-nav"></span></a>
</div>
<div class="navbar-nav">
    <form id="form-iSesion" action="procesos.php" method="POST">
        <a data-toggle="tooltip" title="Entrar o registrarse" id="iSesion" class="d-none d-lg-block nav-item nav-link rounded" href="#"><span class="fas fa-user icon-nav"></span></a>
        <input type="hidden" name="menu" value="1">
    </form>
</div>
<!--<div class="collapse navbar-collapse bg-primary" id="navegador">
    <div class="navbar-nav">
        <a data-toggle="tooltip" data-placement="bottom" title="Comprar" class="d-md-block d-lg-none nav-item nav-link rounded" href="#"><span class="far fa-handshake icon-nav"></span></a>
        <a data-toggle="tooltip" title="Vender" class="nav-item nav-link rounded" href="#"><span class="d-md-block d-lg-none fas fa-hand-holding-usd icon-nav"></span></a>
        <a data-toggle="tooltip" title="Mi carrito" class="d-md-block d-lg-none nav-item nav-link rounded" href="#"><span class="fas fa-shopping-cart icon-nav"></span></a>
        <form id="form-iSesion" action="procesos.php" method="POST">
            <a data-toggle="tooltip" title="Entrar o registrarse" id="iSesion" class="d-md-block d-lg-none nav-item nav-link rounded" href="#"><span class="fas fa-user icon-nav"></span></a>
            <input type="hidden" name="menu" value="1">
        </form>
    </div>
</div>-->
</nav>

有了这个结果：

Full display

Responsive behavior

但是一旦我激活了可折叠的导航栏，一切都会再次混乱，因为该容器占用了大量空间并且我尝试过修复它

Disordered

如果我添加背景，您可以看到它占用了多少空间

collapsable with background

真诚地，我不知道还能尝试什么，这让我发疯了。

编辑：ZimSystem 解决方案有效，但存在问题。当项目折叠时，它们中的每一个都占据了一整行。我想要在菜单折叠时为它们显示内联，一个选项是水平显示所有它们

Answer 1

使用 Bootstrap 4 有几种不同的方法，但我认为最简单的方法是将 navbar-collapse 分开，给每个导航栏部分定义宽度（使用 w-*），然后使用切换器切换 @987654324 @。

<nav class="navbar navbar-expand-lg bg-light navbar-light" role="navegador">
    <a class="navbar-brand w-25" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-target=".navbar-collapse" data-toggle="collapse" aria-label="Expandir navegador" aria-expanded="false">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse w-50" id="navegador">
        <div class="navbar-nav mx-auto justify-content-center">
            <a data-toggle="tooltip" data-placement="bottom" title="Comprar" class="nav-item nav-link rounded" href="#"><span class="far fa-handshake icon-nav"></span></a>
            <a data-toggle="tooltip" title="Vender" class="nav-item nav-link rounded" href="#"><span class="fas fa-hand-holding-usd icon-nav"></span></a>
            <a data-toggle="tooltip" title="Mi carrito" class="nav-item nav-link rounded" href="#"><span class="fas fa-shopping-cart icon-nav"></span></a>
        </div>
    </div>
    <div class="collapse navbar-collapse w-25" id="navegador2">
        <form id="form-iSesion" class="navbar-nav w-100  justify-content-end" action="procesos.php" method="POST">
            <a data-toggle="tooltip" title="Entrar o registrarse" id="iSesion" class="nav-item nav-link rounded" href="#"><span class="fas fa-user icon-nav"></span></a>
            <input type="hidden" name="menu" value="1">
        </form>
    </div>
</nav>

https://www.codeply.com/go/FlImrjvZ0o

Answer 2

这是一个通用示例，使用 Bootstrap v4，按照您的要求进行操作。默认情况下，“中心”菜单位于徽标和右侧菜单之间的可用空间的中心。请注意中间元素上的 ml-auto mr-auto 类。他们将auto 应用于左右边距，使其居中。

如果您想要一个完美的浏览器中心，您唯一的选择是使品牌和右侧菜单在其父级流程中具有相同的宽度。一种快速的方法是使用position:absolute 将它们从父流中移除，但您需要使用top/left/right 属性定位徽标和右侧菜单，并确保它们不与任何中心菜单重叠反应间隔。

但最简单的解决方法是在较小的边上添加边距，使其达到较大的尺寸。在下面的示例中，我为徽标添加了22px 的右边距，这是其宽度与右侧菜单宽度之间的差异。 (86.25 - 64.48)：

@media (min-width: 992px) {
  nav .navbar-brand {
    margin-right: 22px;
  }
}

/* YOU DON'T NEED THE CSS BELOW, I ADDED IT TO 
   SHOW THE MENU IS CENTERED */

/* marking the center of the nav */

@media (min-width: 992px) {
  nav:after {
    width: 3px;
    content: '';
    position: absolute;
    background-color: red;
    height: 100px;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
  }
}


/* marking the center of the navbar-nav */

@media (min-width: 992px) {
  .navbar-nav.ml-auto.mr-auto {
    position: relative;
  }
  .navbar-nav.ml-auto.mr-auto:after {
    width: 1px;
    content: '';
    position: absolute;
    background-color: black;
    height: 50px;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    z-index: 1;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Some link</a>
      </li>
    </ul>
  </div>
</nav>

或者，这可以通过 Javascript 来完成：

(function($) {
  let centerMenu = function() {
    let $left = $('.navbar-brand'),
      $right = $('.navbar-nav', 'nav').last(),
      hasWidth = function(e) {
        return e.is('*') && e.width() > 0
      }

    if (hasWidth($left) && hasWidth($right) && $(window).width() > 992) {
      if ($left.width() > $right.width()) {
        $right.css({
          marginLeft: ($left.width() - $right.width()) + 'px'
        });
      } else {
        $left.css({
          marginRight: ($right.width() - $left.width()) + 'px'
        })
      }
      $(window).off('load resize', centerMenu);
    }
  };
  $(window).on('load resize', centerMenu);
})(jQuery)

jsFiddle.