我一直试图弄清楚这几个小时。我不确定它是Bootstrap 4的问题还是我的语法有问题。当Navbar折叠时,下一个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">
☰
</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。有人可以帮忙吗?
答案 0 :(得分:0)
我假设你并不意味着这个品牌要包装在汉堡里面。如果你问我,这是正确的用户界面。
试试这个
<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">
☰
</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>