将导航栏引导程序 4 向右对齐答案

【问题标题】：Align navbar bootstrap 4 to the right将导航栏引导程序 4 向右对齐
【发布时间】：2017-02-20 19:30:24
【问题描述】：

我正在尝试将新版本的 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>

【问题讨论】：

Align navbar item to the right in bootstrap 4 alpha 6的可能重复

标签： css bootstrap-4 twitter-bootstrap-4

【解决方案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

【讨论】：

【解决方案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-right 在 VS 4 alpha 6 中已弃用。使用 Now ml-auto。