Question

我有来自laravel auth的这个bootstrap主题标题：

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

但结果是，徽标太小了，所以即使它是矢量格式也可以识别。

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

Answer 1

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

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

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

全高度响应徽标和Bootstrap中的标题一样多

1 个答案: