更大的标志而不影响导航栏中的其他元素答案

【问题标题】：Bigger logo without affecting other elements in the navbar更大的标志而不影响导航栏中的其他元素
【发布时间】：2017-10-20 16:44:32
【问题描述】：

我的主要问题是徽标。下面是我附加导航栏和徽标的标题元素。页眉包含一个背景图片，我在其中放置了导航栏。

HTML

<div class="header">
    <div class="container">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light bg-faded">
                <a class="navbar-brand" href="#"><img src="images/logo.svg" /></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div id="navbarNavDropdown" class="navbar-collapse collapse justify-content-end">
                    <ul class="navbar-nav ">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Login</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Register</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</div>

CSS

.navbar-brand > img {
    width: 100%;
}

看起来像这样： image

当我为徽标指定宽度（如20em）时，它会变大，但它也会移动li 项目。我不希望我的 li 项目受到影响。另外，当我指定宽度时，我希望徽标能够响应，它在较小的屏幕上仍然保持不变。

iamge2

【问题讨论】：

标签： html css twitter-bootstrap responsive-design bootstrap-4

【解决方案1】：

我在 bootstrap3 导航栏上尝试了很多徽标大小。对我来说，这是最好的。

首先我给导航栏我想要的高度，并将 li > a line-height 设置为相同的高度，因此链接 padding-top 和 padding-bottom 是固定的（链接垂直居中）。

.navbar {
    min-height: 100px;
}
ul.navbar-nav > li > a {
    line-height: 100px;
}

现在导航栏的高度是 100 像素。考虑到 padding，我的 logo 现在应该有一个 80px 的最大高度，因为我们需要 10px padding-top 和 10px 用于 padding-bottom。假设徽标的宽度为 200 像素，高度为 80 像素，我将类徽标赋予 img。

<a class="navbar-brand" href="#"><img src="#" class="logo" alt=""></a>

现在记住填充，我在徽标中添加了 10px 的 padding-top。

img.logo {
    padding-top: 0px;
    width: 200px;
    height: auto;
}

如果您想要不同的徽标大小，只需更改导航栏最小高度/行高并更改徽标宽度/填充。

Bootstrap 3 小提琴： https://jsfiddle.net/yghg5hsx/

Bootstrap 4 小提琴： https://jsfiddle.net/973Lde7j/3/

【讨论】：

感谢您的回复，但我使用的是 bootstrap 4 而不是 3，我已经习惯了 3，但我的公司希望继续使用 4
bootstrap 4也是一样的，我更新了jsfiddle：jsfiddle.net/973Lde7j/3

【解决方案2】：

将您的徽标放在一个 div 中，并将导航栏的其余内容放在另一个 div 中

然后试试这个：

#navbar { width:100%}

#logoDiv { width:20% }
#contentDiv { width:80% }

【讨论】：