Bootstrap，如何使徽标适应导航栏大小？

Question

我正在使用以下代码制作我网站的导航栏：

  <nav class="navbar navbar-inverse navbar-fixed-top"> 

    <div class="navbar-header">

    <img src="images/logo.png" class="img-circle">
    </div>

    <div class="container-fluid">
      <ul class="nav navbar-nav navbar-right">
        <li> <a href="#">Liens</a> </li>
        <li> <a href="#">Login</a> </li>
        <li> <a href="#">Signup</a> </li>
      </ul>
    </div>
  </nav>

问题是徽标图像很大（225x225 像素），我想将其设置为导航栏的默认大小。但相反的情况发生，即导航栏适应徽标的大小（并且变得非常大）。

我在引导程序中没有找到任何功能来做到这一点？任何的想法 ？

谢谢

Answer 1

navbar-fixed-top 有一个固定的高度 50px，所以你可以直接设置一个图像的样式，例如设置max-height: 40px为它和margin: 5px居中图像。

.navbar-header img {
  height: 40px;
  margin: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top"> 

    <div class="navbar-header">

    <img src="http://lorempixel.com/225/225" class="img-circle">
    </div>

    <div class="container-fluid">
      <ul class="nav navbar-nav navbar-right">
        <li> <a href="#">Liens</a> </li>
        <li> <a href="#">Login</a> </li>
        <li> <a href="#">Signup</a> </li>
      </ul>
    </div>
  </nav>