徽标不适合导航栏

Question

我按照引导方式构建了一个导航栏和一个页脚，但是我对导航栏有一些麻烦，我想在左边的开头的导航栏中放置一个我的徽标图像，但徽标确实如此不适合列。我不知道为什么。

这是我的代码：

<header>
    <nav class="navbar navbar-default">
        <ul class="nav navbar-nav navbar-left">
            <a href="/" class="navbar-brand"><img  src="img/logo1.png" class="img img-responsive" alt=""></a>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="/Register">Register</a></li>
            <li><a href="/Login">Login</a></li>
        </ul>
    </nav>
</header>

图片：

我试图添加这个css：

.navbar-brand
{
    margin: 0;
    padding: 0;
}

.navbar-brand img
{
    max-height: 100%;
}

然后我的图像变得很小，如果我想增加图像尺寸的图像拉伸，我只想让图像保持尺寸比例，并且适合导航栏的左侧，这里有什么问题？

bootply

Answer 1

将navbar-brand放在navbar-nav

之外

<header>
  <nav class="navbar navbar-default">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="img/logo1.png" class="img img-responsive" alt="">
      </a>
    </div>
    <ul class="nav navbar-nav navbar-left">
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="/Register">Register</a></li>
      <li><a href="/Login">Login</a></li>
    </ul>
  </nav>
</header>

<强> More Info

Answer 2

你可以试试这个..

.navbar-brand
{
   padding-left:20px;
   z-index:999;
   position:relative;
}