从 Bootstrap 导航栏中删除左侧填充并保持正确的响应行为

Question

我想从下面的导航栏中删除左边的填充：

和窄视口中的顶部填充：

导航条码和 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