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（堆叠在自己之上）或浮动/边距。

如果我在<div>之前将<brand> s置于崩溃后的品牌上方。

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和margin来强制navbar-nav保持水平，以便从切换器开始间隔..

<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 navbar - 内容在崩溃时跳到品牌下方

1 个答案: