我把Bootstrap nav放在我正在制作的一个网站上,这对我来说有点问题。
当在较小的屏幕上折叠时,下拉导航菜单不会覆盖100%的屏幕-它看起来好像在菜单的两边都有一个1px的间隙,我似乎找不到解决这个问题的办法。
**编辑**
由于我最初的帖子中有错误的标记-我在JSFIDDLE更新了这个(仍然有问题,但这更好地代表了我的问题)
<div class="navbar navbar-custom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation">
<span class="fa fa-bars fa-2x"></span> Menu</button>
<span class="logo"> Logo</span>
</div>
<div class="collapse navbar-collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li><a href="#linkRemovedForNow">Book A Repair</a> </li>
<li><a href="#about">About</a> </li>
<li><a href="#howitworks">How it Works</a> </li>
<li><a href="#testimonals">Testimonals</a> </li>
<li><a href="#contact">Contact</a> </li>
</ul>
</div>
</div>
发布于 2016-02-27 03:17:03
这是因为.navbar-collapse上的引导程序余量造成的。这是15px的负边距。只需将其每边向外移动一个像素:
.navbar-custom .container >.navbar-collapse {
margin-right: -16px;
margin-left: -16px;
}Bootply
https://stackoverflow.com/questions/35649104
复制相似问题