Question

我一直试图这样做几天没有任何完整的结果，我一直在尝试从这里提出的其他问题的代码，什么都没有。我希望我的导航栏品牌位于左侧，中间的一些图标和右侧的一个图标，我希望所有这些都可以折叠。我尝试了所有的东西，但是Flexbox在可折叠的div上对我不起作用，我唯一可以做的就是我最接近我的目标是：

doMagic

结果如下：

Full display

Responsive behavior

但是一旦我激活了可折叠的导航栏，所有内容都会再次混乱，因为该容器占用了大量空间，而且我尝试过的任何东西都可以修复它

Disordered

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

collapsable with background

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

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

Answer 1

使用Bootstrap 4有几种不同的方法，但我认为最简单的方法是分离navbar-collapse，给每个Navbar部分一个定义的宽度（使用w-*），然后使用toggler来切换navbar-collapse。

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

Alernatively，这可以通过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

Bootstrap Navbar Brand左侧，可折叠图标位于中央，单项右侧

2 个答案: