Question

有人可以看看这个小提琴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文字覆盖了徽标，它不应该（我知道我可以使用）填充，但我必须是一种更自然的方式来记住徽标占据的空间），然后，徽标看起来切割！：S

任何人都可以看到我做错了什么？

干杯：）

Answer 1

看起来问题就在这里：

#mainNavigation.navbar-header {

以上css正在寻找的是一个id为mainNavigation 和类nav-header的div 但是你在它们之间添加一个空格，它会在 mainNavigation中找到类：

#mainNavigation .navbar-header {

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

徽标图像隐藏和文本架空标志

1 个答案: