Collapse button on right side of navbar in bootstrap 4

问题

I am creating navbar using bootstrap 4 and made following changes

set the Collapse button on right side
Took the BrandName outside the collapse area so that its always there on Left side

Here is the detailed code

<nav class="navbar navbar-dark bg-danger">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
    <div class="collapse navbar-toggleable-md" id="navbarResponsive">           
        <ul class="nav navbar-nav float-md-right">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                <div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>          
    </div>
</nav>

I am facing problem while clicking on hamburger icon as its not displaying my Collapsing Menus Properly.

I don't know where I am making mistake.

Here is the Pen

回答1:

you have to wrap the button and heading in a div and put class="clearfix-xs" in it. like this

<div class="clearfix-xs">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    </button>
</div>

and css for this clss is:

@media(max-width:768px){.clearfix-xs:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
}

here's a pen

来源：https://stackoverflow.com/questions/41185631/collapse-button-on-right-side-of-navbar-in-bootstrap-4

标签

html

css

twitter-bootstrap

bootstrap-4