全高响应式徽标与 Bootstrap 中的标题一样多

Question

我有这个来自 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>

我想在<!-- Branding Image --> 之后添加我的徽标

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

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

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

Answer 1

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

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

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