摆脱导航品牌的空白?

时间:2014-11-07 22:35:52

标签: twitter-bootstrap-3 navbar

我是一个新手,我试图摆脱额外的"白色"我的导航栏品牌周围的空间。我希望背景颜色相同,没有边框,但我无法弄清楚它是由什么造成的,或者是如何定位它的。

我还试图在悬停时定位其他链接的背景。

有什么建议吗?

<nav role="navigation" class="navbar navbar-fixed-top">
        <div class="container">
          <header class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">
                 <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
             </button>
<!--navbar-brand-->
               <a class="navbar-brand" href="#"><span class="first-name">Sume</span></a>
          </header>
          <div class="collapse navbar-collapse" id="nav-collapse">
             <ul class="nav navbar-nav">
              <li class="active"><a href="#intro">About</a></li>
              <li><a href="#exp">Experience</a></li>
              <li><a href="#skl">Technical Skills</a></li>
              <li><a href="#contact">Contact</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>

CSS

.navbar-nav a {
  color: white;
  font-size:125%;
}
.navbar .navbar-header .navbar-brand {
    color: white;
} 
.navbar {
  background-color:rgb(37,96,155);

}
.navbar .navbar-brand {
  background-color:rgb(37,96,155);
  color:white;
}

1 个答案:

答案 0 :(得分:1)

看起来你不小心打开了一个新的按钮元素而不是关闭你开始的按钮元素。像这样改变这个块:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>