我的主要问题是带有徽标。以下是我的标题元素,我附上了我的导航栏和徽标。标题包含背景图片,并在其中放置了我的导航栏。更大的标志,不会影响导航栏中的其他元素
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
项目受到影响。另外,我希望徽标在指定宽度时能够作出响应,但在较小的屏幕中仍然保持不变。
感谢您的答复,但我使用引导4不是3,我已经习惯到3,但我的公司希望继续与4 –
引导程序是相同的4.我更新了jsfiddle:https://jsfiddle.net/973Lde7j/3/ – grusl83