Bootstrap品牌形象顯示太大

Question

也許它的我的CSS，但我的代碼應該在頭部以固定的大小顯示圖像。但是，看起來它可能在div之外。繼承人的代碼。

 <div class="row"> 
     <div class="col-md-12 top navbar-fixed-top"> 
       <div class="col-md-6"> 

    <nav class="navbar navbar-default" role="navigation"> 
        <div class="navbar-header"> 

         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
          <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> 
         </button> 
    <a class="navbar-brand" href="#"><img class="img-responsive" src="http://dev-httpwwwrestechsyscom.pantheonsite.io/sites/all/themes/myWay/logo.png"></a> 
    </div></nav></div> 

       <div class="col-md-6"> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
         <ul class="nav navbar-nav"> 
          <ul class="menu"><li class="first expanded dropdown active"><a href="/" title="" class="dropdown-toggle active" data-toggle="dropdown" data-target="#">About Us <span class="caret"></span></a><ul class="dropdown-menu"><li class="first leaf active"><a href="/" title="" class="active">Mission Statement</a></li> 
    <li class="leaf"><a href="http://dev-httpwwwrestechsyscom.pantheon.io/content/meet-our-team" title="">Meet Our Team</a></li> 
    <li class="leaf"><a href="/content/testimonials" title="">Testimonials</a></li> 
    <li class="last leaf"><a href="/profiles-football" title="">Sample Athletes Profile</a></li> 
    </ul></li> 
    <li class="leaf"><a href="/content/eligibility-requirements">Eligibility</a></li> 
    <li class="expanded dropdown"><a href="/content/recruiting-info" class="dropdown-toggle" data-toggle="dropdown" data-target="#">Recruiting <span class="caret"></span></a><ul class="dropdown-menu"><li class="first leaf"><a href="http://dev-httpwwwrestechsyscom.pantheon.io/content/recruiting-faq" title="">Recruiting FAQ</a></li> 
    <li class="last leaf"><a href="http://dev-httpwwwrestechsyscom.pantheon.io/content/recruiting-info" title="">Recruiting Info</a></li> 
    </ul></li> 
    <li class="last leaf"><a href="/content/elite-membership">Services</a></li> 
    </ul><li class="active"></li> 

         </ul> 

        </div> 

      </div></div></div> 

Answer 1

你可以用這種方法修復它。只需將所需的高度添加到品牌圖片，寬度將根據高度自動調整。例如：

.navbar-brand img { 
    height: 30px; 
} 

Answer 2

您可以將max-height: 100%添加到.navbar-brand img元素，它包含的.navbar-brand內的圖像。的.navbar-brand的height爲引導的CSS 50px，所以要使它更大比，改變的height.navbar-brand

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<style> 
 
.navbar-brand img { 
 
    max-height: 100%; 
 
} 
 

 
/* add/change this if you want to make the navbar brand area bigger */ 
 
.navbar-brand { 
 
    height: 100px; 
 
} 
 
</style> 
 
<div class="row"> 
 
    <div class="col-md-12 top navbar-fixed-top"> 
 
    <div class="col-md-6"> 
 

 
     <nav class="navbar navbar-default" role="navigation"> 
 
     <div class="navbar-header"> 
 

 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
          <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> 
 
         </button> 
 
      <a class="navbar-brand" href="#"><img class="img-responsive" src="http://dev-httpwwwrestechsyscom.pantheonsite.io/sites/all/themes/myWay/logo.png"></a> 
 
     </div> 
 
     </nav> 
 
    </div> 
 

 
    <div class="col-md-6"> 
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
      <ul class="menu"> 
 
      <li class="first expanded dropdown active"><a href="/" title="" class="dropdown-toggle active" data-toggle="dropdown" data-target="#">About Us <span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
       <li class="first leaf active"><a href="/" title="" class="active">Mission Statement</a></li> 
 
       <li class="leaf"><a href="http://dev-httpwwwrestechsyscom.pantheon.io/content/meet-our-team" title="">Meet Our Team</a></li> 
 
       <li class="leaf"><a href="/content/testimonials" title="">Testimonials</a></li> 
 
       <li class="last leaf"><a href="/profiles-football" title="">Sample Athletes Profile</a></li> 
 
       </ul> 
 
      </li> 
 
      <li class="leaf"><a href="/content/eligibility-requirements">Eligibility</a></li> 
 
      <li class="expanded dropdown"><a href="/content/recruiting-info" class="dropdown-toggle" data-toggle="dropdown" data-target="#">Recruiting <span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
       <li class="first leaf"><a href="http://dev-httpwwwrestechsyscom.pantheon.io/content/recruiting-faq" title="">Recruiting FAQ</a></li> 
 
       <li class="last leaf"><a href="http://dev-httpwwwrestechsyscom.pantheon.io/content/recruiting-info" title="">Recruiting Info</a></li> 
 
       </ul> 
 
      </li> 
 
      <li class="last leaf"><a href="/content/elite-membership">Services</a></li> 
 
      </ul> 
 
      <li class="active"></li> 
 

 
     </ul> 
 

 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>