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像素），我想将其设置为导航栏的默认大小。但恰恰相反，即导航栏适应徽标的大小（并变得非常大）。

我没有在bootstrap中找到任何功能来执行此操作？有什么想法吗？

谢谢

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/output/technics-q-c-225-225-4.jpg" 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>

Answer 2

我在某个时候遇到了同样的问题，这就是我所做的。希望这对你有用

.brand{
	max-height: 30px;
	
}

 <a href="link/location/here" class="img-circle">
   <img class="brand" src="img/logo.png">
 </a>

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

2 个答案: