html - Logo 图像隐藏和文本头顶 Logo

Question

谁能看看这个 fiddle http://jsfiddle.net/pkcwtone/1/并告诉我为什么我无法将图像完全放入导航中？

这是 html:

<nav id="mainNavigation" class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Responsive navigation -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2">    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>

            </button>
          <a class="navbar-brand" href="">
            <img src="http://s28.postimg.org/gc8ajkjq5/advance_logo.png" alt=""/>
          </a>   
        </div>
        <div class="clearfix"></div>
        <div class="collapse navbar-collapse" id="navbar-collapse-2">      
            <!-- top navigation-->
            <ul class="nav navbar-nav navbar-left">
              <li>
                <a href="">Home</a>
              </li>
                <li>    
                  <a href="">Accident<br>Management</a>
                </li>
                <li>    
                  <a href="">Approved<br>Manufacturers</a>
                </li>
                  <li>
                    <a href="">Our<br>Services</a>
                </li>
                <li>    
                  <a href="">About<br>Advance</a>
                </li>
                 <li>   
                  <a href="">Contact<br>Us</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">                     
            </ul>
        </div>
    </div>
</nav>

这是CSS:

#mainNavigation.navbar-default{
  /*background: #f9540a;*/
    background:black;
    width: 100%;
    text-align: center;
    font-family:'Droid Sans', sans-serif;
    font-weight:700;
    font-size:1.2em;
}
#mainNavigation.navbar-header {
    float: left;
    padding: 15px;
    text-align: center;
    width: 100%;
}
#mainNavigation .container-fluid{
height:auto;
overflow:auto;
}
.navbar-brand img{
float:left;
}

我一直在玩溢出……用 clearfix……用高度……但它看起来很糟糕:S 文本覆盖了 Logo ，它不应该这样(我知道我可以使用填充，但我认为记住 Logo 占用的空间一定是一种更自然的方式)，然后， Logo 看起来被剪裁了! :S

谁能看出我做错了什么？

干杯:)

Answer 1

看起来问题出在这里:

#mainNavigation.navbar-header {

上面的 css 正在寻找的是一个带有 id mainNavigation 和 class nav-header 的 div无论您在它们之间添加一个空格，它都会在 mainNavigation 中查找类:

#mainNavigation .navbar-header {

您将能够调整导航栏的大小以适合 Logo ，请参阅更新的 jsfiddle: http://jsfiddle.net/pkcwtone/4/