将Bootstrap导航栏切成两半

Question

I'm using Bootstrap navbar with the bootstrap.min.css file. This navbar stretches to the entire screen, where in the CSS file do I change the navbar settings (I don't want it to stretch)? There are a lot of navbar classes there and I can't seem to locate the right one.

<div class="navbar navbar-inverse navbar-static-top">
        <div class="container">

            <a href="#" class="navbar-brand">Imperia Bank</a>

            <button class="navbar-toggle" data-toggle="collapse"
                data-target=".navHeaderCollapse">
                <span class="icon-bar"></span> <span class="icon-bar"></span> <span
                    class="icon-bar"></span>
            </button>

            <div class="collapse navbar-collapse navHeaderCollapse">

                <ul class="nav navbar-nav navbar-right">

                    <li class="active"><a href="homepage.html">Home</a></li>
                    <li><a href="Login.html">Login</a></li>
                    <li><a href="Register.html">Register</a></li>
                    <li><a href="customer.html">Clients</a></li>
                    <li><a href="Administrator.html">Administrator</a></li>
                    <li><a href="account.html">Accounts</a></li>
                    <li><a href="Illustration.html">Illustration</a></li>
                    <li ><a href="ATM.html">Atm</a></li>

                </ul>

            </div>

        </div>
    </div>

Answer 1

将<div class="container">放在<div class="navbar navbar-inverse navbar-static-top"> 。

Answer 2

For anyone trying to make the navbar a custom width in Bootstrap 4, just override the navbar css width.

For example:

.navbar {
   width: 400px;
} 

In case you have more than 1 navbars (?!) just specify a custom class/id for the one you want to alter.

Answer 3

You should be able add your own styles on top of the existing styles. Using a tool like the chrome debugger you should b able to find the style rule that is doing this and then in your own stylesheet just use a more specific CSS selector to override it.

Answer 4

You can place the navbar in its own container (with applicable ID) and adjust the width of the container in your stylesheets. As Swagata said, you should be able to just flip the div tags and adjust your css accordingly. I'd give it a memorable name, though, for the sake of editing.

Answer 5

There is no pretty way to do this, considering .navbar was built to span the screen. But it can be accomplished fairly easily using the built in grid.

<div id='row'>
    <div id='col-md-6'>
        INSERT NAVBAR HERE
    </div>
    <div id='col-md-6'>
        INSERT WHATEVER YOU WANT ON THE OTHER HALF OF THE SCREEN HERE
    </div>
</div>