bootstrap 4 导航栏 - 内容在折叠时跳到品牌下方

Question

我正在尝试使用最新的 boot4 (alpha6) 创建一个双导航栏。

http://codepen.io/anon/pen/qrERBP

<nav class="navbar navbar-toggleable-md navbar-light navbar-inverse bg-faded" style="background-color: #000000">

    <button class="navbar-toggler navbar-toggler-right navina" 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="navbar-header"> -->
    <a class="navbar-brand navina" href="/">
        <img src="/images/logow.png" class="img-fluid" alt="Responsive image">
    </a>
    <ul class="navbar-nav navina hidden-lg-up float-right">
        <img src="/images/search.png">
    </ul>
<!-- </div> -->
    <!-- <div  id="navbarNavDropdown" class="navbar-collapse collapse"> -->
    <ul class="navbar-nav mr-auto">
    </ul>
    <ul class="navbar-nav navina hidden-md-down">
        <li class="nav-item navina">
        <a class="nav-link" href="/kosik/">
            <img src="/images/kosik.png" class="img-rounded" aria-hidden="true" style="height:25px; width:25px"> Košík
            <span class="badge"></span>
        </a>
      </li>
      <li class="nav-item dropdown navina">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">  <img src="/images/pouz.png" class="img-circle" style="height:25px; width:25px"><span class="caret"></span>
          Používateľ
        </a>
        <div class="dropdown-menu my-2 my-lg-0" aria-labelledby="navbarDropdownMenuLink" align="right">
            {{# if login}}
          <a class="dropdown-item" href="/user/userprofile">Tvoj účet</a>
          <a class="dropdown-item" href="/user/logout">Odhlásiť</a>
          {{ else }}
          <a class="dropdown-item" href="/user/login">Prihlás sa</a>
          <a class="dropdown-item" href="/user/signup"> Zaregistrovať </a>
          {{/if}}
        </div>
      </li>
    </ul>
    <!-- </div> -->
</nav>

对于中等或更小的视口，我希望下部导航栏折叠成上部导航栏上的右对齐汉堡菜单。 用户和购物车图标以及搜索图标应位于此汉堡菜单的左侧。

但在折叠时，新图标会跳到品牌下方。 添加到导航栏的任何元素都会...

我在这方面花了将近 3 天的时间，但几种不同的方法都失败了，包括添加其他 <button>s（堆叠在它们自己之上）或浮动/边距。

如果我将<div>s 放在<brand> 之前，则所有内容在折叠后都会堆叠在品牌上方。

Answer 1

将搜索图标与其他链接放在右侧并使用ml-auto右对齐..

<nav class="navbar navbar-toggleable-md navbar-light navbar-inverse bg-faded" style="background-color: #000000">
    <button class="navbar-toggler navbar-toggler-right navina" 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>
    <a class="navbar-brand navina" href="/">
        <img src="/images/logow.png" class="img-fluid" alt="Responsive image">
    </a>
    <ul class="navbar-nav hidden-md-down ml-auto">
        <li class="nav-item">
             <a class="nav-link"><img src="/images/search.png" alt="search"></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/kosik/">
                <img src="/images/kosik.png" class="img-rounded" aria-hidden="true" style="height:25px; width:25px"> Košík
                <span class="badge"></span>
            </a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <img src="/images/pouz.png" class="img-circle" style="height:25px; width:25px"><span class="caret"></span> Používateľ
            </a>
            <div class="dropdown-menu my-2 my-lg-0" aria-labelledby="navbarDropdownMenuLink" align="right">
                {{# if login}}
                <a class="dropdown-item" href="/user/userprofile">Tvoj účet</a>
                <a class="dropdown-item" href="/user/logout">Odhlásiť</a> {{ else }}
                <a class="dropdown-item" href="/user/login">Prihlás sa</a>
                <a class="dropdown-item" href="/user/signup"> Zaregistrovať </a> {{/if}}
            </div>
        </li>
    </ul>
</nav>

http://www.codeply.com/go/ztTrZaszBU

编辑

我想我了解您希望切换器左侧的额外链接始终。在这种情况下，您必须强制 navbar-nav 使用 flexbox 实用程序和边距使其与切换器保持水平距离。

<ul class="navbar-nav d-flex flex-row flex-nowrap ml-auto mr-sm-5 mr-md-5 mr-lg-0">..</ul>

Codeply updated