Bootstrap 4-使用切换按钮将链接移至导航栏的右侧 [英] Bootstrap 4 -- Moving links to the right of the navbar with a toggle button

问题描述

我试图将链接从导航栏的左侧移动到右侧，但不允许我这样做.我尝试过将其向右浮动，但未发生任何事情，与position:relative;相同；右:200px；和padding-right:-200px;.如果有人有其他建议，将不胜感激.

I was attempting to move the links from the left of the navbar to the right side and it wouldn't let me. I've tried floating it to the right and nothing had happened, same with position:relative; right: 200px; and padding-right: -200px;. If anyone has any other suggestions it would be appreciated thank you.

<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>

推荐答案

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

You're using the .mr-auto so you have margin-right: auto !important and the nav-items left aligned.
If you change the class to .ml-auto you have margin-left: auto !important and your nav-items are right aligned

这篇关于Bootstrap 4-使用切换按钮将链接移至导航栏的右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！