Изображение бренда Bootstrap слишком велико

Возможно, это мой 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>
Источник

2 ответа

Вы можете исправить это таким образом. Просто добавьте желаемую высоту к изображению бренда, и ширина будет автоматически в зависимости от высоты. Например:

.navbar-brand img {
   height: 30px;
}
Источник

Вы можете добавить max-height: 100% к .navbar-brand img элемент, и он будет содержать изображение внутри .navbar-brand, height из .navbar-brand является 50px из CSS начальной загрузки, поэтому, чтобы сделать его больше, измените 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>

Источник
Другие вопросы по тегам