Bootstrap 4折叠导航栏品牌不居中

时间:2017-12-27 19:42:32

标签: html css twitter-bootstrap navbar twitter-bootstrap-4

我正在努力让品牌商品和导航商品在移动设备上保持一致。

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. image&amp;更好地描述我正在努力实现的目标。

编辑2: 找到解决方案!我得到的每个答案都解决了我的问题。但 dmbaughman的 答案最简单,并且不会打扰网站上的其他内容。

2 个答案:

答案 0 :(得分:0)

因为你正在使用mx-auto并且它正确地工作在屏幕的开始和右边的按钮之间的中心,它之前有点......看到jpeg,你会看到现在它居中,因为我删除了按钮mx-auto找到两个元素之间的中心.... 首先看你可以使用百分比的保证金风格,并在右边移动一点品牌...... 再见enter image description here

这样可以解决您的问题吗?

以这种方式改变品牌

               <a href="#" class="navbar-brand mx-auto"><span style="margin-left:50%">Brand</span></a>

结果

enter image description here

答案 1 :(得分:0)

问题是.navbar-brand链接没有下面链接那么宽,因为它与右侧的菜单图标共享空间。如果您只是将菜单图标置于绝对位置,它将从文档流中删除,品牌/链接将正确对齐。

电流

Brand moved aside by menu button

将这些样式添加到.navbar-toggler

.navbar-toggler {
  position: absolute;
  top: 8px;
  right: 16px;
}

结果

Fixed