如何在 Bootstrap 中将导航项居中？

Question

如果我想在 Bootstrap 4 中根据浏览器窗口大小将导航栏上的导航项（链接）居中怎么办？看一下代码：

 <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link disabled" href="#">Disabled</a>
        </div>
    </div>
</nav>

现在我想根据浏览器宽度将 div“navbar-nav”居中。我尝试过的一件事是给它 mr-auto 和 ml-auto 这似乎确实使它居中但不完全是。它的实际作用是根据宽度 “browser window width - logo width” 将其居中。我希望它正好位于屏幕中间。

我也尝试过将位置更改为绝对位置，但同样在折叠模式下也会弄乱布局。

原文由 Parker Queen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

响应地使用 flexbox 和 margin utils …

Bootstrap 4 alpha 6 http://codeply.com/go/YvzHvQQRAs （中心品牌和链接）

 <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="d-md-flex d-block flex-row mx-md-auto mx-0">
        <a class="navbar-brand" href="#">Navbar</a>
        <div class="collapse navbar-collapse mr-auto" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#">Features</a>
                <a class="nav-item nav-link" href="#">Pricing</a>
                <a class="nav-item nav-link disabled" href="#">Disabled</a>
            </div>
        </div>
    </div>
</nav>

Bootstrap 4.1 https://www.codeply.com/go/sTJUthyswN （中心品牌，在移动设备上左对齐）

编辑..

答案还是基本一样。使用 mx-auto 居中。

http://codeply.com/go/mycC5z8lpJ （中心链接，左侧品牌）

 <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav mx-auto">
            <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-link" href="#">Features</a>
            <a class="nav-link" href="#">Pricing</a>
            <a class="nav-link disabled" href="#">Disabled</a>
        </div>
    </div>
</nav>

如果您希望链接在视口中 完全 居中，请参见此处的第二个示例：http: //www.codeply.com/go/RCBftzZCD8

其他 Bootstrap 4 导航栏对齐示例

另请参阅…

在 Bootstrap 4 Navbar 中居中元素

中心导航栏链接没有品牌在 Bootstrap 4 中将其推到右侧？

如何使用 Flexbox 在 Bootstrap 4 中将导航栏居中

如何在 Bootstrap 4 中定位导航栏内容

Bootstrap 4 Navbar 在左侧对齐徽标中心和切换图标

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以使用这个 CSS：

 #navbarNavAltMarkup {
  position: absolute;
  text-align: center;
}
#navbarNavAltMarkup > div {
  display: inline-block;
  width: 100%;
}
#navbarNavAltMarkup > div > a {
  display: inline;
}

它使菜单的容器独立于其父级，为其提供全宽并将其中的元素居中对齐。

https://codepen.io/anon/pen/XRggYY

原文由 Johannes 发布，翻译遵循 CC BY-SA 3.0 许可协议