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

问题描述

我试图将我的导航栏链接居中，但是当我这样做时，我的品牌徽标将其推到了右侧，因此它没有居中.这是我的 html ...

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span><a class="navbar-brand" href="index.html">品牌名称</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">首页 <span class="sr-only">(当前)</span></a><li class="nav-item"><a class="nav-link" href="#">Link</a><li class="nav-item"><a class="nav-link" href="#">Link</a>

</nav>

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

解决方案

发生这种情况是因为相邻的 flexbox 项目相对于彼此的位置.

一种选择是使用 flexbox 实用程序，并在右侧使用全宽占位符元素.导航栏品牌也使用 w-100 工具类设置为全角.

<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><a href class="navbar-brand d-flex w-100 mr-0">品牌是更广泛的名称</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 class="nav-item"><a class="nav-link" href="#">Center</a><li class="nav-item"><a class="nav-link" href="#">Link</a>

<div class="d-flex w-100">

</nav>

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

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

@media(最小宽度:567px){.abs-center-x {位置:绝对；顶部:5px；左:50%；变换:translateX(-50%);}}

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

相关:
Bootstrap 4 菜单切换按钮左右，以品牌为中心
LOGO如何居中且不折叠，切换图标应出现在导航栏中的左侧?

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

Related:
Bootstrap 4 menu toggle button to left and right, with brand in center
How the LOGO could be CENTERED and Not collapsing and toggle icon should appear on left in the Navbar?

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