从Bootstrap导航栏中删除左边距并保持正确的响应行为

Question

我想从下面的导航栏中删除左边距:

和窄视口中的顶部填充:

Navbar代码和JSFiddle:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">About</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Discuss</a></li>
    </ul>
  </div>
</nav>

https://jsfiddle.net/wx6bx3pr/

已尝试的解决方案 - 将.container-fluid的填充设置为零可在宽视口中获得所需的结果:

.container-fluid
{
  padding: 0;
}

除了在狭窄的视口中完全断开它,活动菜单项突出到导航栏之外,容器和菜单项文本之间没有间距:

如何在不破坏窄视口的情况下获得所需的解决方案？

非常感谢.

Answer 1

像这样尝试导航栏上的负边距..

@media (min-width: 768px) {
  .navbar-nav {
    float: left;
    margin: 0;
    margin-left: -15px;
  }
}

.navbar-nav {
    margin: 0 -15px;
}

http://codeply.com/go/leAaYlOaYd