Boostrap 4 Navbar折叠菜单右对齐

问题描述

我正在使用Bootstrap 4，我试图通过单击折叠按钮在右侧而不是左侧打开弹出菜单来弹出菜单.我尝试在"ul"元素上使用"ml-auto".导航栏项未折叠时，它们正确地位于右侧.折叠时，按钮正确在右侧，但菜单在左侧弹出.我也尝试过在div中放入"ml-auto"，但这没有用.这是我的HTML:

I am using Bootstrap 4 and I am trying to make the menu that pops up by clicking the collapse button to open on the right side instead of the left. I have tried using "ml-auto" on the "ul" element. The navbar items are correctly on the right side when it isn't collapsed. When it is collapsed, the button is correctly on the right side but the menu pops up on the left. I have also tried putting "ml-auto" in the div as well but that didn't work. Here is my HTML:

<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
    <a class="navbar-brand" href="#home"><img id="logo" class="no-opacity" src="content/white-logo.png"></a>
    <button class="navbar-toggler ml-auto" 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>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#home"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp;Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#about"><i class="fa fa-user fa-fw" aria-hidden="true"></i>&nbsp;About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#projects"><i class="fa fa-folder-open fa-fw" aria-hidden="true"></i>&nbsp;Projects</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#experience"><i class="fa fa-briefcase fa-fw" aria-hidden="true"></i>&nbsp;Experience</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#contact"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i>&nbsp;Contact</a>
            </li>
        </ul>
    </div>
</nav>

我觉得有一个简单的解决方案，但我不知道.感谢您的帮助！

I feel like there is a simple solution but I can't figure it out. Thanks for the help!

推荐答案

只需将简单规则添加到CSS中即可.

Just add simple rule to your css.

 .nav-item{
    text-align: right;
}

这篇关于Boostrap 4 Navbar折叠菜单右对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！