gpt4 book ai didi

css - 与 Bootstrap 中的 header 一样多的全高响应 Logo

转载 作者:太空宇宙 更新时间:2023-11-04 09:46:06 25 4
gpt4 key购买 nike

我有这个来自 laravel auth 的 bootstrap 主题 header :

<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 --> 之后添加我的 Logo

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

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

enter image description here

我的问题是如何使 header 内的 Logo 与 header 的高度相同,或者至少使其足够大。

最佳答案

您应该设置 Logo 的特定高度:

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

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

关于css - 与 Bootstrap 中的 header 一样多的全高响应 Logo ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39475452/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com