Question

我试图将链接从导航栏的左侧移动到右侧，它不会让我。我试过把它漂浮到右边，没有发生任何事情，与位置相同：相对;右：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>

Answer 1

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

Answer 2

尝试所有选项后，菜单图标（navbar-toggler-icon）未在Bootstrap 4.1中向右移动。
我尝试了以下工作：
在 @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。这对我来说很好。

Answer 3

修改bootstrap中的一些css：

使用.mr-auto { margin-right: 0 !important; } .navbar-toggleable-md .navbar-collapse { -webkit-justify-content: flex-end; justify-content: flex-end; }启动结束内容

{{1}}

这是小提琴代码：https://jsfiddle.net/0ewenvcb/2/

Answer 4

如果以上都失败了，我在CSS中的navbar类中添加了100％的宽度。在此之前，mr-auto并没有使用Bootstrap 4.1为我工作。

Bootstrap 4 - 使用切换按钮移动导航栏右侧的链接

4 个答案: