Bootstrap 4 — Moving links to the right of the nav

问题:

This question already has an answer here:

• Bootstrap 4 align navbar items to the right 18 answers

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>

回答1:

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

回答2:

After trying all options, the menu-icon (navbar-toggler-icon) was not moving to the right in Bootstrap 4.1.
I tried the following work around:
Under @media (max-width:575px) - added .navbar-header {width:100%;}, and under class .menu-icon (I named it menu-icon) {justify-content:end;}.
This moved both the navbar-brand and menu-icon to the right. To move the navbar-brand to the left, in the HTML added class mr-auto to navbar-brand. This worked just fine for me.

回答3:

Modify some css in bootstrap:

Used justify-content: end; to start content for end

.mr-auto {
    margin-right: 0 !important;
}
.navbar-toggleable-md .navbar-collapse {         
    -webkit-justify-content: flex-end;
    justify-content: flex-end;  
} 

Here is fiddle code: https://jsfiddle.net/0ewenvcb/2/

回答4:

If all above fails, I added 100% width to the navbar class in CSS. Until then mr-auto wasn't working for me on this project using Bootstrap 4.1.