试图在我的导航中添加徽标

Question

我会说实话，我可能会遗漏一些东西。我正在尝试使用Bootstrap 3进行导航，看起来像这样：

http://s24.postimg.org/a8bo7btol/Untitled.png

现在我有了HTML的基本结构，主要问题是当我将浏览器缩小到大约700px宽时，主导航保持在顶部，第二个导航结束在我的主导航下面（基本上 - 我的宽度是超过了，一切都崩溃了。）

我的图片是374 x 45。

这是非引导CSS：

body {
    margin-top: 125px;
}
.nav {
    margin-top: 28px;
}

这是我的HTML ...

<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button data-target=".navbar-ex1-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) -->
          <a href="index.php" class="navbar-brand logo-nav"><img src="images/icon.png"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav navbar">
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container -->
    </nav>

我的智慧结束了......我错过了什么？

Answer 1

用这个替换你的外部CSS ...

body {
 margin-top: 125px;
}    
.logo-nav {
  padding: 5px 0px;
}
.logo-nav img{
  width:254px;
  height: auto;
}

这会使事情奏效。您可以使用填充来控制徽标上方的空间，只需确保它不超过总共50 px（总填充+计算的徽标高度）。在这种情况下，您可以减小徽标的宽度或增加导航栏的高度。您可以通过接受正确答案来表示感谢。