如何使用Flexbox在Bootstrap 4中居中导航栏 [英] How to center navbar in Bootstrap 4 using Flexbox

问题描述

好吧，我想要实现这个目标： https://i.imgur.com/BDM7JvD。 jpg 使用Bootstrap 4导航栏。

如何使用flexbox或mr-auto等在视口中间集中导航链接/项目公用事业。我试图避免使用基于CSS的定位方法，因为它可能会在不同的设备上显示。但确定如果一个CSS方法承诺在相同的集中位置，那么为什么不呢！

注意：有些ppl可能会说使用justify实用程序，prom是你无法将它们用作navbar品牌，并将navbar-nav不能包裹在div中。如果我这样做的话，布局就会混乱。

nav class =navbar navbar-toggleable-md navbar-light bg-custom card-shadow-bottom>

 < div class =container> 
 
< button class =navbar-toggler navbar-toggler-righttype =buttondata-toggle =collapsedata-target =＃navbarSupportedContentaria-controls =navbarSupportedContent aria-expanded =falsearia-label =切换导航> 
< span class =navbar-toggler-icon>< / span> 
< / button> 
 
< a class =navbar-brandhref =＃>< img src =img / nav-logo.pngalt =logoclass =nav-logo >< / A> 
 
< div class =collapse navbar-collapseid =navbarSupportedContent> 
< ul class =navbar-nav ml-auto mr-auto> 
< 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> 
 
< / nav> 
  

解决方案

使用flexbox实用程序以您想要的方式对齐组件。这里 justify-content-center 用于居中 navbar-nav 。

 < nav class =navbar navbar-fixed-top navbar-toggleable-sm navbar-inverse bg-primary justify-content-between> 
< button class =navbar-toggler navbar-toggler-righttype =buttondata-toggle =collapsedata-target =＃collapsingNavbar> 
< span class =navbar-toggler-icon>< / span> 
< / button> 
< a href =/class =navbar-brand>品牌< / a> 
< div class =navbar-collapse collapse justify-content-centerid =collapsingNavbar> 
< ul class =navbar-nav> 
< li class =nav-item active> 
< a class =nav-linkhref =＃>连结< span class =sr-only>主页< / span>< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃>连结< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃data-toggle =collapse>连结< / a> 
< / li> 
< / ul> 
 
< / div> 
< ul class =nav navbar-nav flex-row> 
< li class =nav-item>< a class =nav-link pr-3href =>< i class =fa fa-facebook>< / I>< / A>< /锂> 
< li class =nav-item>< a class =nav-linkhref =>< i class =fa fa-twitter>< / i> < / A>< /锂> 
< / ul> 
< / nav> 
  

更多导航栏对齐示例 $ b 更新引导4.0.0

navbar-toggleable-sm 现在 navbar-expand-md

现在 navbar-dark

navbar-fixed -top 现在固定顶部

Well, I want to achieve this thing: https://i.imgur.com/BDM7JvD.jpg using the Bootstrap 4 Navbar.

How can I centralize the nav-links/items in the middle of the viewport using the flexbox or mr-auto etc utilities. I am trying to avoid a CSS based positioning approach because it may look off on different devices. But sure if a CSS approach promises to be at the same centralized position then why not!

NOTE: some ppl might say to use the justify utilities, the prom is you cant use them as the navbar-brand and the navbar-nav cant be wrapped inside a div. If I do so, the layout messes up.

nav class="navbar navbar-toggleable-md navbar-light bg-custom card-shadow-bottom">

        <div class="container">

            <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="#"><img src="img/nav-logo.png" alt="logo" class="nav-logo"></a>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Disabled</a>
                    </li>
                </ul>
            </div>

        </div>

    </nav>

解决方案

Use the flexbox utilities to align components the way you want. Here the justify-content-center is used to center the navbar-nav.

<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-inverse bg-primary justify-content-between">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="/" class="navbar-brand">Brand</a>
    <div class="navbar-collapse collapse justify-content-center" id="collapsingNavbar">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link <span class="sr-only">Home</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-toggle="collapse">Link</a>
            </li>
        </ul>

    </div>
    <ul class="nav navbar-nav flex-row">
        <li class="nav-item"><a class="nav-link pr-3" href=""><i class="fa fa-facebook"></i></a></li>
        <li class="nav-item"><a class="nav-link" href=""><i class="fa fa-twitter"></i></a></li>
    </ul>
</nav>

More Navbar alignment examples

Update Bootstrap 4.0.0

navbar-toggleable-sm is now navbar-expand-md
navbar-inverse is now navbar-dark
navbar-fixed-top is now fixed-top

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