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

您可以向.navbar-brand img元素添加一个max-height: 100%，它将包含.navbar-brand中的图像。.navbar-brand的height是来自bootstrap的css的50px，因此要使其更大，请更改.navbar-brand的height

​

<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>

​