Bootstrap 4 中心导航栏品牌与折叠 [英] Bootstrap 4 center navbar brand with collapse

问题描述

引导程序 4 Alpha 6

我似乎无法弄清楚如何让右侧链接和左侧链接都折叠起来.现在只有右手边的链接崩溃.

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">菜单<div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li class="nav-item"><a class="nav-link" href="#">Link</a><li class="nav-item"><a class="nav-link" href="#">Link</a><li class="nav-item"><a class="nav-link" href="#">Link</a><li class="nav-item"><a class="nav-link" href="#">Link</a>

<a class="navbar-brand mx-auto" href="#">NavBar</a><div class="navbar-collapse collapse"><ul class="nav navbar-nav ml-auto"><li class="nav-item"><a class="nav-link" href="#">关于</a>

解决方案

目前在 alpha 6 中，折叠仅支持单个目标..

更新 Bootstrap 4.1

您可以在更大的屏幕上绝对定位品牌，并为 2 个导航栏使用单个折叠.

@media(最小宽度:768px){.navbar-品牌{位置:绝对；左:50%；变换:translateX(-50%);}}

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

另见:
在 Bootstrap 4 导航栏中居中元素
如何在 Bootstrap 中将导航项居中?

Bootstrap 4 Alpha 6

I cant seem to figure out how to get both the right links and left link to both collapse. Right now only the right hand side link collapses.

<nav id="topNav" class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
    Menu
</button>
<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Link</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>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
    </ul>
</div>

<a class="navbar-brand mx-auto" href="#">NavBar</a>

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
    </ul>
</div>

解决方案

Currently in alpha 6, the collapse only supports a single target..

Update Bootstrap 4.1

You can absolute position the brand on larger screens, and use a single collapse for the 2 navbars.

@media (min-width: 768px) {
.navbar-brand
    {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

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

Also see:
Center an element in Bootstrap 4 Navbar
How to center nav-items in Bootstrap?

这篇关于Bootstrap 4 中心导航栏品牌与折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！