bootstrap 3导航栏填充和项目背景

Question

我正在使用bootstrap 3来构建一个网站。谁能告诉我如何删除菜单项的填充/边距？它目前看起来像这样：

我还想在悬停项目时使用不同的链接颜色。我的代码目前是这样的：

  <!-- Start main navigation -->
  <nav class="navbar navbar-custom" role="navigation">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
      </div>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#"><i class="fa fa-home"></i></a></li>
        <li><a href="#">Politica</a></li>
        <li class="headerDivider"></li>
        <li><a href="#">Societate</a></li>
        <li><a href="#">Economie</a></li>
        <li><a href="#">Extern</a></li>
        <li><a href="#">Stil de viata</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </nav>

CSS：

.navbar-custom {
    background-color:#303334;
    color:#ffffff;
border-radius:0;
margin-bottom: 0;
}

.navbar-custom .navbar-nav > li > a {
color:#fff;
padding-left:20px;
padding-right:20px;
}

.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav >      .active > a:focus {
color: #ffffff;
background-color:transparent;
}

.navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: #007faa;
}

.navbar-custom .navbar-brand {
color:#eeeeee;
}

.navbar-custom .navbar-toggle {
background-color:#eeeeee;
}

.navbar-custom .icon-bar {
background-color:#007faa;
}

.navbar-nav {
font: 400 1.3em 'Oswald', 'Arial Narrow', Arial, sans-serif;    
text-transform: uppercase;
}

.fa-home {
font-size: 1.2em;
}

.navbar-nav>li {
margin-right: 15px;
}

谢谢。

Answer 1

只需在css

中编写此代码即可

.nav＆gt; li>一个{

padding: 0 !important;

} 感谢

Answer 2

基于 this fiddle ，您可以使用以下命令删除填充：

.navbar {
    border: none; /* optional depending on your requirements */
}

.nav > li > a {
    padding:0;
    margin:0;
}

要添加不同的悬停状态颜色，您可以使用例如：

.nav > li > a:hover {
    color:red;
}

Answer 3

你可以试试这个：

.navbar-nav>li {
    margin-right: 0px;
}

.navbar-custom .navbar-nav > li > a {
     color:#fff;
     padding:0px !important;
}

由于