如何正确对齐引导导航项目

Question

嗨，有什么办法可以让我的导航栏位于左侧，而登录名和注册栏位于右侧？

这是我的html导航代码：

<div class="container-fluid">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">BoostTemplates</a>
        <button class="navbar-toggler" 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="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="#">Shop</a>
                <a class="nav-item nav-link" href="#">Contact</a>
                <a class="nav-item nav-link" href="#">Log-in</a>
                <a class="nav-item nav-link" href="#">Sign-up</a>
            </div>
        </div>
    </nav>
</div>

Answer 1

是的，实际上是 Bootstrap 实际上有示例显示了如何：https://getbootstrap.com/docs/4.3/components/navbar/#supported-content

布局

您需要分开左侧的导航栏和右侧的导航栏。然后，您需要将.mr-auto（自动边距右边）应用于左侧的导航栏。由于.navbar-collapse显示为 flexbox 。 .mr-auto会将登录/注册导航尽可能地推到右侧！

<div class="container-fluid">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">BoostTemplates</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" />
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav mr-auto">
                <a class="nav-item nav-link active" href="#">
                    Home <span class="sr-only">(current)</span>
                </a>
                <a class="nav-item nav-link" href="#">Shop</a>
                <a class="nav-item nav-link" href="#">Contact</a>
            </div>
            <div class="navbar-nav">
                <a class="nav-item nav-link" href="#">Log-in</a>
                <a class="nav-item nav-link" href="#">Sign-up</a>
            </div>
        </div>
    </nav>
</div>

结果

演示： https://jsfiddle.net/davidliang2008/0hkcoa1f/1/

Answer 2

<div class="container-fluid">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">BoostTemplates</a>
        <button class="navbar-toggler" 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="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav mr-auto">
                <a class="nav-item nav-link active" href="#">
                    Home <span class="sr-only">(current)</span>
                </a>
                <a class="nav-item nav-link" href="#">Shop</a>
                <a class="nav-item nav-link" href="#">Contact</a>
            </div>
            <div class="navbar-nav">
                <a class="nav-item nav-link" href="#">Log-in</a>
                <a class="nav-item nav-link" href="#">Sign-up</a>
            </div>
        </div>
    </nav>
</div>