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

Question

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

和窄视口中的顶部填充：

Navbar代码＆amp;的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