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>

Answer 2

我曾經遇到過同樣的問題，這就是我所做的。 希望這對你有用

 .brand{ max-height: 30px; }

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