Boostrap 4 Navbar Collapse Menu Right Align

问题:

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!

回答1:

Just add simple rule to your css.

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

回答2:

According to http://getbootstrap.com/docs/4.0/components/navs/#horizontal-alignment, the way to center, right-justify, or left-justify things in the navbar's collapsed dropdown is to use justify-content-end and friends in the class of a nav.

Example. This code yields the image following it.

<nav class="navbar navbar-expand-lg fixed-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <ul class="list-inline social-buttons">
            {% for link in site.social %}
            <li class="list-inline-item">
                <a href="{{ link.url }}"><i class="{{ link.icon }}"></i></a>
            </li>
            {% endfor %}
        </ul>

        <div class="navbar-toggler" data-toggle="collapse" data-target="#menu">
            &#9776;<!-- three bars symbol -->
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="menu">
            <ul class="nav ml-auto">
                <a class="nav-link page-scroll" href="#about">About</a>
                <a class="nav-link page-scroll" href="#projects">Projects</a>
                <a class="nav-link page-scroll" href="#writing">Writing</a>
                <a class="nav-link page-scroll" href="#contact">Contact</a>
            </ul>
        </div>
    </div>
</nav>

Now amending that one line to:

<div class="nav ml-auto justify-content-end">

yields

Note this evidently has nothing to do with ml-auto, which when missing causes the uncollapsed menu items (on a wider screen) to not be right-justified. (The toggler button itself is always right justified for me.) Only justify seems to control the stuff in the uncollapsed menu.

回答3:

Just use "text-right" in HTML

For example:

<div class="navbar-collapse text-right" id="navbarResponsive">