Question

我有以下导航栏：它几乎是我需要的位置，即品牌，中心导航栏和左导航栏。使用引导程序使中心部分真正居中的方式是什么。

先谢谢您

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
		<div class="container">
			<div class="mr-auto order-0">
				<a class="navbar-brand mx-auto" href="#">Brand</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
					<span class="navbar-toggler-icon"></span>
				</button>
			</div>
			<div class="navbar-collapse collapse w-100 mx-auto order-1 order-md-0 dual-collapse2">
				<ul class="navbar-nav mx-auto">
					<li class="nav-item">
						<a class="nav-link scroller" href="#menu">aa</a>
					</li>
					<li class="nav-item">
						<a class="nav-link scroller" data-toggle="collapse" data-target=".navbar-collapse.show" href="#specials">bb</a>
					</li>
					<li class="nav-item">
						<a class="nav-link scroller" href="#events">cc</a>
					</li>
				</ul>
			</div>

			<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
				<ul class="navbar-nav ml-auto">
					<li class="nav-item">
						<a class="nav-link scroller" href="#aaa">aaa</a>
					</li>
					<li class="nav-item">
						<a class="nav-link scroller" href="#bbb">bbb</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>

Answer 1

您也只需要制作品牌容器w-100 ...

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
    <div class="container">
        <div class="w-100 order-0">
            <a class="navbar-brand mx-auto" href="#">Brand</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse w-100 mx-auto order-1 order-md-0 dual-collapse2">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link scroller" href="#menu">aa</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scroller" data-toggle="collapse" data-target=".navbar-collapse.show" href="#specials">bb</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scroller" href="#events">cc</a>
                </li>
            </ul>
        </div>
        <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link scroller" href="#aaa">aaa</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scroller" href="#bbb">bbb</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Demo

将内部导航栏居中在双折叠导航栏中

1 个答案: