全高响应徽标在 Bootstrap 中与 header 一样多

Question

我有这个 bootstrap theme-header 来自 laravel auth:

<body id="app-layout" style="background-color:#F5F5F5;">
        <nav class="navbar navbar-default navbar-static-top" style="background-color:white;">
            <div class="container">
                <div class="navbar-header">

                    <!-- Collapsed Hamburger -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>


                    <!-- Branding Image -->
                    <a class="navbar-brand" href="{{ url('/') }}">
                    <p>NameOfBrand</p>
                    </a>

                </div>
                 ...
          </div>
      </nav>

我想在 

之后添加我的徽标

<img  class="navbar-brand" src="images/logoName.svg"></img>

但结果是，logo太小了，即使是矢量格式也能被识别。

我的问题是如何使 header 中的徽标与 header 的高度相同，或者至少使其足够大。

Answer 1

您应该设置徽标的特定高度：

.navbar-brand {
   height: 50px;
   width: 50px;
}

或使用百分比：http://jsfiddle.net/QrrpB/2551/

全高响应徽标在 Bootstrap 中与 header 一样多

Full height responsive logo as much as header in Bootstrap

css

twitter

navbar

twitter-bootstrap-3