Bootstrap 4 - 使用切换按钮将链接移动到导航栏的右侧[重复]

Posted 2023-03-05

【中文标题】Bootstrap 4 - 使用切换按钮将链接移动到导航栏的右侧[重复]

【英文标题】：Bootstrap 4 -- Moving links to the right of the navbar with a toggle button [duplicate]

【发布时间】：2017-06-02 09:24:56

【问题描述】：

我试图将链接从导航栏左侧移动到右侧，但它不允许我这样做。我尝试将它浮动到右侧，但没有发生任何事情，与 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="Toggle navigation">

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

    </button>

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

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

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

【参考方案1】：

您使用的是.mr-auto，所以您有margin-right: auto !important，并且导航项左对齐。 如果您将课程更改为.ml-auto，您将拥有margin-left: auto !important，并且您的导航项是右对齐的

【讨论】：

在 jsfiddle 中确认：jsfiddle.net/sayLz41a

修改 jsfiddle jsfiddle.net/sayLz41a/1（白色导航栏上的黑色文本而不是白色导航栏上的白色文本）

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

我有类似的要求，但我应该在哪里修改....在布局页面？

@singhswat 取决于您的导航栏在哪里

【参考方案2】：

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

【讨论】：

这似乎不起作用..链接仍在左侧:(

在小提琴中它正在工作..

imgur.com/nCwNwGi 在 Chrome OSX 版本 55.0.2883.95（64 位）上的链接在您的答案中的小提琴链接中左对齐 (jsfiddle.net/0ewenvcb/1)

更新了我的代码和小提琴

【参考方案3】：

如果以上都失败了，我在 CSS 中为导航栏类添加了 100% 的宽度。在那之前，mr-auto 并没有为我使用 Bootstrap 4.1 在这个项目上工作。

【参考方案4】：

尝试所有选项后，菜单图标（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。这对我来说效果很好。