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

Question

我想从下面的导航栏中删除左侧填充:

和窄视口(viewport)中的顶部填充:

导航栏代码和 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 的填充设置为零可在宽视口(viewport)中获得所需的结果:

.container-fluid
{
  padding: 0;
}

除了在狭窄的视口(viewport)中完全打破它，事件菜单项突出到导航栏之外，并且容器和菜单项文本之间没有间距:

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

非常感谢。

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