没有品牌的中心导航链接将其推到Bootstrap 4的右侧？ [英] Center Navbar links without brand pushing it to the right in Bootstrap 4?

问题描述

我试图以我的导航栏链接为中心，但是当我做我的品牌标识将其推向右侧时，它不会居中。 Heres my html ...

 < nav class =navbar navbar-toggleable-md navbar-light main-nav> ; 
< button class =navbar-toggler navbar-toggler-righttype =buttondata-toggle =collapsedata-target =＃navbarSupportedContentaria-controls =navbarSupportedContentaria-expanded = falsearia-label =切换导航> 
< span class =navbar-toggler-icon>< / span> 
< / button> 
< a class =navbar-brandhref =index.html>品牌名称< / a> 
 
< div class =collapse navbar-collapseid =navbarSupportedContent> 
< ul class =navbar-nav mx-auto clearfix> 
< li class =nav-item active> 
< a class =nav-linkhref =index.html>主页< span class =sr-only>（current）< / span>< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃>连结< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃>连结< / a> 
< / li> 
< / ul> 
 
< / div> 
< / nav> 
  

如何阻止品牌徽标影响我的导航栏链接的位置。

解决方案

发生这种情况是因为相邻的flexbox物品相对于彼此的位置。

一种选择是使用flexbox utils，并在右侧使用全宽度占位符元素。导航栏品牌也设置为全角使用 w-100 util类。

 < nav class =navbar navbar -tableable navbar-inverse bg-primary justify-content-center> 
< button class =navbar-toggler navbar-toggler-righttype =buttondata-toggle =collapsedata-target =＃navbarCenter> 
< span class =navbar-toggler-icon>< / span> 
< / button> 
< a href class =navbar-brand d-flex w-100 mr-0> Brand is Wider Name< / a> 
< div class =navbar-collapse collapseid =navbarCenter> 
< ul class =navbar-nav mx-auto text-center> 
< li class =nav-item> 
< a class =nav-linkhref =＃>连结< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃>中心< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃>连结< / a> 
< / li> 
< / ul> 
< / div> 
< div class =d-flex w-100> < / DIV> 
< / nav> 
  

http://www.codeply.com/go/N7veP8FMqg

另一个选择是绝对定位 .navbar-nav ..

  @media（min-width：567px）{
 .abs-center-x {
 position：absolute; 
 top：5px; 
剩下：50％; 
 transform：translateX（-50％）; 
} 
} 
  

https://www.codeply.com/go/RCBftzZCD8

I am trying to center my navbar links but when i do my brand logo pushes it to the right so it is not centered. Heres my html ...

<nav class="navbar navbar-toggleable-md navbar-light main-nav">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="index.html">Brand Name</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mx-auto clearfix">
      <li class="nav-item active">
        <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>

  </div>
</nav> 

How can i stop the brand logo from affecting the position of my navbar links.

解决方案

This happens because of the way adjacent flexbox items position relative to each other.

One option is to use the flexbox utils, and a full width placeholder element on right. The navbar-brand is also set to full-width using w-100 util class.

<nav class="navbar navbar-toggleable navbar-inverse bg-primary justify-content-center">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCenter">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href class="navbar-brand d-flex w-100 mr-0">Brand is Wider Name</a>
    <div class="navbar-collapse collapse" id="navbarCenter">
        <ul class="navbar-nav mx-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Center</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="d-flex w-100"> </div>
</nav>

http://www.codeply.com/go/N7veP8FMqg

Another option is to absolute position the .navbar-nav..

@media (min-width: 567px) {
    .abs-center-x {
        position: absolute;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
    }
}

https://www.codeply.com/go/RCBftzZCD8

这篇关于没有品牌的中心导航链接将其推到Bootstrap 4的右侧？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！