Question

我正在尝试将新版本的Bootstrap用于个人项目。我试图制作一个导航栏，我希望链接与右边对齐，我寻找解决方案，但我找不到如何做到这一点。这是我的代码

<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="#">taïho sushi</a>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Présentation</a>
            <a class="nav-item nav-link" href="#">Menu</a>
            <a class="nav-item nav-link" href="#">Contact</a>
        </div>
    </div>
</nav>

Answer 1

使用设置ml-auto的新margin-left:auto类，并将内容推向右侧。

<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="#">taïho sushi</a>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav ml-auto">
            <a class="nav-item nav-link active" href="#">Présentation</a>
            <a class="nav-item nav-link" href="#">Menu</a>
            <a class="nav-item nav-link" href="#">Contact</a>
        </div>
    </div>
</nav>

Demo on Codeply

Answer 2

使用navbar-right类

<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="#">taïho sushi</a>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav navbar-right">
            <a class="nav-item nav-link active" href="#">Présentation</a>
            <a class="nav-item nav-link" href="#">Menu</a>
            <a class="nav-item nav-link" href="#">Contact</a>
        </div>
    </div>
</nav>

将navbar bootstrap 4对齐到右侧

2 个答案: