引导程序4：当导航栏折叠时，li项目在导航栏品牌旁边水平显示

我一直在试图弄清楚几个小时。我不确定这是否是Bootstrap 4的问题，或者我的语法有问题。当Navbar崩溃时，下一个li将显示在navbar品牌文本的右侧，而不是像所有其他项目一样显示在其下面。引导程序4：当导航栏折叠时，li项目在导航栏品牌旁边水平显示

<nav class="navbar navbar-fixed-top navbar-dark bg-primary"> 
      <div class="container"> 
       <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"> 
       &#9776; 
       </button> 
       <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> 
       <div class="nav-item"> 
        <a class="navbar-brand nav-link" href="#">IMGS</a> 
       </div> 

       <ul class="nav navbar-nav"> 

        <li class="nav-item"> 
        <a class="nav-link" href="#">About</a> 
        </li> 

        <li class="nav-item"> 
        <a class="nav-link" href="#">Contact</a> 
        </li> 
       </ul> 

       <ul class="nav navbar-nav pull-sm-right"> 
       <li class="nav-item"> 
        <a class="nav-item nav-link" href="#">Sign Up</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-item nav-link" href="#">Login</a> 
       </li> 
       </ul> 
       </div> 
      </nav>

我还添加了一个codepen http://codepen.io/NachoSupreme/pen/xEgwJz。谁能帮忙？

来源

2016-09-22 NachoSupreme

我假设你并不是要将品牌包装在汉堡里面。如果你问我，这是正确的用户界面。

试试这个

<nav class="navbar navbar-fixed-top navbar-dark bg-primary"> 
<div class="container"> 
    <a class="navbar-brand nav-link" href="#">IMGS</a> 
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"> 
    &#9776; 
    </button> 
    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> 
    <div class="nav-item"> 

    </div> 

    <ul class="nav navbar-nav"> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">About</a> 
     </li> 

     <li class="nav-item"> 
     <a class="nav-link" href="#">Contact</a> 
     </li> 
    </ul> 

    <ul class="nav navbar-nav pull-sm-right"> 
    <li class="nav-item"> 
     <a class="nav-item nav-link" href="#">Sign Up</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-item nav-link" href="#">Login</a> 
    </li> 
    </ul> 
    </div> 
</nav>

来源

2016-09-22 00:46:30 user2684452

我想这个品牌在UI包。我只是想让所有李元素在崩溃视图中直接归属于品牌。目前，“关于”li元素与品牌是水平的，而不是与其他项目垂直。 – NachoSupreme

为什么你想要品牌包装在汉堡包？糟糕的UX。你想在手机上隐藏标志？ – user2684452

我同意你这是不好的品牌。但是，这是我正在开发的一个项目，这是要求的一部分。 – NachoSupreme

引导程序4：当导航栏折叠时，li项目在导航栏品牌旁边水平显示

回答

相关问题