我想让移动视图中的品牌商品和导航商品一致。
Mobile view --> Aling wrong. Not centered. "Brand" should be vertically aligned with "link1-3" Desktop view --> Aling should be like this
没有运气,我尝试了不同的东西。 This is one of the things I tried但它没有用。
我的代码atm:Codeply.com
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a href="#" class="navbar-brand mx-auto">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end nav-justified" id="navbarNav">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Link 1<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Link 2</a>
<a class="nav-item nav-link" href="#">Link 3</a>
</div>
</div>
</nav>
我需要做些什么才能让品牌项目和导航项目保持一致?
编辑1:更新1.图像和更好的描述我想要实现的目标。
编辑2:找到解决方案!我得到的每一个答案都解决了我的问题。但是dmbaughman的答案最简单,并没有打扰网站上的其他内容。
问题是.navbar-brand
链接不像下面的链接那么宽,因为它与右侧的菜单图标共享空间。如果您只是将菜单图标置于绝对位置,它将从文档流中删除,品牌/链接将正确对齐。
.navbar-toggler
.navbar-toggler {
position: absolute;
top: 8px;
right: 16px;
}