我在我正在制作的网站上放置的引导程序导航有点问题。
在较小的屏幕上折叠时,下拉菜单不会跨越 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>
这是因为.navbar-collapse
上的引导边距是 15px 的负边距。只需将其每边移出一个像素:
.navbar-custom .container >.navbar-collapse {
margin-right: -16px;
margin-left: -16px;
}
引导