Bootstrap 4 - 如何通过切换按钮将链接移动到导航栏的右侧

Question

我尝试将导航栏左侧的链接移动到右侧，但是无法实现。我已尝试使用浮动向右移动，但没有任何效果，使用position:relative; right:200px;和padding-right: -200px;也不行。如果有其他建议，将不胜感激，谢谢。

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

    </button>

    <a class="navbar-brand" href="index.html">

        <img id="logo" src="images/logo.png" width="200" class="d-inline-block align-top" alt="">

    </a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav mr-auto">

            <li class="nav-item">
                <a class="nav-link active text-white" href="index.html">Home <span class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item">
                <a class="nav-link text-white" href="services.html">Services</a>
            </li>

            <li class="nav-item">
                <a class="nav-link text-white" href="portfolio.html">Portfolio</a>
            </li>

            <li class="nav-item">
                <a class="nav-link text-white" href="about.html">About</a>
            </li>

        </ul>

    </div>
</nav>

- Cameron Foster

Answer 1

您正在使用 .mr-auto 类，因此您拥有 margin-right: auto !important 和左对齐的导航项。
如果您将类更改为 .ml-auto，则拥有 margin-left: auto !important，并且导航项将右对齐。

- julianstark999

---

已在jsfiddle中确认：https://jsfiddle.net/sayLz41a/ - haxxxton

修改后的 jsfiddle https://jsfiddle.net/sayLz41a/1/ （黑色文本在白色导航栏上，而不是白色文本在白色导航栏上） - julianstark999

我见过最简单、最具说明性的答案。谢谢@DestinatioN。 - Tes3awy

我有一个类似的请求，但我应该在哪里修改...在布局页面吗？ - singhswat

@singhswat，这取决于您的导航栏在哪里。 - julianstark999

Answer 2

尝试了所有选项后，Bootstrap 4.1中的菜单图标（navbar-toggler-icon）无法向右移动。
我尝试了以下解决方法：
在@media (max-width:575px)下 - 添加.navbar-header {width:100%;}，并在.menu-icon类（我将其命名为menu-icon）下添加{justify-content:end;}。
这将navbar-brand和menu-icon都移到了右侧。要将navbar-brand移到左侧，在HTML中将类mr-auto添加到navbar-brand中。这对我来说完全有效。

- A G Aranha

Answer 3

修改 Bootstrap 中的一些 CSS：

使用 justify-content: end; 将内容对齐到末尾

.mr-auto {
    margin-right: 0 !important;
}
.navbar-toggleable-md .navbar-collapse {         
    -webkit-justify-content: flex-end;
    justify-content: flex-end;  
} 

这是代码演示链接: https://jsfiddle.net/0ewenvcb/2/

- Mukesh Ram

---

这似乎没有起作用...链接仍然在左边 :( - haxxxton

在 Fiddle 中它可以工作。 - Mukesh Ram

在Chrome OSX版本55.0.2883.95（64位）上，您在答案中的jsfiddle链接（https://jsfiddle.net/0ewenvcb/1/）中的链接是左对齐的。 - haxxxton

更新了我的代码和示例。 - Mukesh Ram

Answer 4

如果以上所有方法都失败了，我在CSS中为navbar类添加了100％的宽度。 在此之前，在使用Bootstrap 4.1时，mr-auto对我无效。

- domdaviesdev