如何在Bootstrap中导航项目？ [英] How to center nav-items in Bootstrap?

问题描述

如果我想根据Bootstrap 4中的浏览器窗口大小将nav-items（链接）置于导航栏上，那么该怎么办？请看代码：

 < nav class =navbar navbar -tableable-md navbar-light bg-faded> 
< button class =navbar-toggler navbar-toggler-righttype =buttondata-toggle =collapsedata-target =＃navbarNavAltMarkuparia-controls =navbarNavAltMarkuparia-expanded = falsearia-label =切换导航> 
< span class =navbar-toggler-icon>< / span> 
< / button> 
< a class =navbar-brandhref =＃> Navbar< / a> 
< div class =collapse navbar-collapseid =navbarNavAltMarkup> 
< div class =navbar-nav> 
< a class =nav-item nav-link activehref =＃>主页< span class =sr-only>（current）< / span>< / a> ; 
< a class =nav-item nav-linkhref =＃>功能< / a> 
< a class =nav-item nav-linkhref =＃>定价< / a> 
< a class =nav-item nav-link disabledhref =＃>已禁用< / a> 
< / div> 
< / div> 
< / nav> 
  

现在我想根据浏览器宽度居中divnavbar-nav。我曾尝试过的一件事是给它mr-auto和ml-auto，它看起来居中但不完全。实际上，它根据宽度浏览器窗口宽度 - 标识宽度对其进行居中。我希望它完全集中在屏幕中间。

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

解决方案

使用flexbox和margin utils作为响应...

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

 < nav class =navbar navbar-toggleable-md navbar-light bg-faded> 
< button class =navbar-toggler navbar-toggler-righttype =buttondata-toggle =collapsedata-target =＃navbarNavAltMarkuparia-controls =navbarNavAltMarkuparia-expanded = falsearia-label =切换导航> 
< span class =navbar-toggler-icon>< / span> 
< / button> 
< div class =d-md-flex d-block flex-row mx-md-auto mx-0> 
< a class =navbar-brandhref =＃> Navbar< / a> 
< div class =collapse navbar-collapse mr-autoid =navbarNavAltMarkup> 
< div class =navbar-nav> 
< a class =nav-item nav-link activehref =＃>主页< span class =sr-only>（current）< / span>< / a> ; 
< a class =nav-item nav-linkhref =＃>功能< / a> 
< a class =nav-item nav-linkhref =＃>定价< / a> 
< a class =nav-item nav-link disabledhref =＃>已禁用< / a> 
< / div> 
< / div> 
< / div> 
< / nav> 
  

编辑..

<答案>答案仍然基本相同。使用 mx-auto 来居中。

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

 < nav class =navbar navbar -tableable-md navbar-light bg-faded> 
< button class =navbar-toggler navbar-toggler-righttype =buttondata-toggle =collapsedata-target =＃navbarNavAltMarkuparia-controls =navbarNavAltMarkuparia-expanded = falsearia-label =切换导航> 
< span class =navbar-toggler-icon>< / span> 
< / button> 
< a class =navbar-brandhref =＃> Navbar< / a> 
< div class =collapse navbar-collapseid =navbarNavAltMarkup> 
< div class =navbar-nav mx-auto> 
 < a class =nav-linkhref =＃>功能< / a> 
< a class =nav-linkhref =＃>定价< / a> 
< a class =nav-link disabledhref =＃>已禁用< / a> 
< / div> 
< / div> 
< / nav> 
  

如果您希望链接恰好居中在视口中，请参阅第2例如： http://www.codeply.com/go/RCBftzZCD8

其他Bootstrap 4导航栏对齐示例

另见 ...

在Bootstrap 4 Navbar中居中元素

没有品牌的Center Navbar链接将其推向右侧Bootstrap 4？

如何使用Flexbo在Bootstrap 4中居中导航栏x

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

What if I want to center the nav-items (links) on the navbar according to the browser window size in Bootstrap 4. Take a look at the code:

<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>

Now I want to center the div "navbar-nav" according to browser width. One thing that I have tried is giving it mr-auto and ml-auto which does seem to center it but not exactly. What it actually does it centers it according to the width "browser window width - logo width" . I want it centered exactly in the middle of the screen.

I have tried changing position to absolute as well but again that kind of messes up layout in collapsed mode as well.

解决方案

Use the flexbox and margin utils responsively...

http://codeply.com/go/YvzHvQQRAs (center brand & links)

<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>

EDIT..

The answer is still basically the same. Use mx-auto to center.

http://codeply.com/go/mycC5z8lpJ (center links, brand left)

<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>

If you want the links exactly centered in the viewport, see the 2nd example here: http://www.codeply.com/go/RCBftzZCD8

Other Bootstrap 4 Navbar alignment examples

Also see...

Center an element in Bootstrap 4 Navbar
Center Navbar links without brand pushing it to the right in Bootstrap 4?
How to center navbar in Bootstrap 4 using Flexbox
How to position navbar contents in Bootstrap 4

这篇关于如何在Bootstrap中导航项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！