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内的图片。来自bootstrap的CSS的height .navbar-brand为50px，因此为了使其大于此值，请更改height的{{1}}

.navbar-brand

Bootstrap品牌形象显示太大

2 个答案: