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

Question

我正在尝试使用最新的 boot4 (alpha6) 制作双导航栏。

<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（堆叠在它们自己之上）或 floating/margins.

如果我将 <div> 放在 <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

编辑

我想我明白您想要切换器左侧的额外链接总是。在那种情况下，您必须使用 flexbox utils 和边距强制 navbar-nav 保持水平，使其从切换器到 space ..

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

Codeply updated

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

bootstrap 4 navbar - content jumps below brand on collapse

html

css

navbar

bootstrap-4

twitter-bootstrap-4