Question

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

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

Answer 1

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

然后试试这个：

#navbar { width:100%}

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

Answer 2

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

首先，我将导航栏设为我想要的高度，然后设置li＆gt;一个行高到相同的高度，所以链接填充顶部和填充底部是固定的（链接是垂直居中的）。

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

导航栏现在高度为100px。考虑到填充，我的徽标现在应该具有80px的最大高度，因为我们需要10px填充顶部和10px填充底部。让我们说这个标志的宽度为200px，高度为80px，我给img提供了类标识。

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

现在记住填充物，我在徽标上添加了10px的填充顶部。

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

如果您需要不同的徽标尺寸，只需更改导航栏min-height / line-height并更改徽标宽度/填充。

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

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

更大的徽标，不会影响导航栏中的其他元素

2 个答案: