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

问题描述

我试图将链接从导航栏左侧移动到右侧，但它不允许我这样做.我试过将它向右浮动，但什么也没发生，与 position:relative 相同；右:200px；和填充右:-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="切换导航"><span class="navbar-toggler-icon"></span><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 class="nav-item"><a class="nav-link text-white" href="services.html">服务</a><li class="nav-item"><a class="nav-link text-white" href="portfolio.html">作品集</a><li class="nav-item"><a class="nav-link text-white" href="about.html">关于</a>

</nav>

解决方案

你正在使用 .mr-auto 所以你有 margin-right: auto !important并且导航项左对齐.
如果您将类更改为 .ml-auto 您有 margin-left: auto !important 并且您的导航项目右对齐

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>

解决方案

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