Question

我正在使用带有bootstrap.min.css文件的Bootstrap导航栏。这个导航栏延伸到整个屏幕，我在CSS文件中更改导航栏设置（我不希望它拉伸）？那里有很多navbar类，我似乎无法找到合适的类。

<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

对于任何想要在Bootstrap 4中使导航栏成为自定义宽度的人，只需覆盖导航栏css宽度。

例如：

.navbar {
   width: 400px;
}

如果您有多个导航栏（？！），只需为要更改的导航栏指定自定义类/ ID。

Answer 3

您应该可以在现有样式之上添加自己的样式。使用类似chrome调试器的工具，您应该能够找到执行此操作的样式规则，然后在您自己的样式表中使用更具体的CSS选择器来覆盖它。

Answer 4

您可以将导航栏放在自己的容器中（带有适用的ID），并调整样式表中容器的宽度。正如Swagata所说，你应该只需翻转div标签并相应地调整你的css。不过，为了编辑，我给它一个令人难忘的名字。

Answer 5

没有很好的方法可以做到这一点，考虑到.navbar是为了跨越屏幕而构建的。但是使用内置网格可以很容易地完成它。

<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>

将Bootstrap导航栏切成两半

5 个答案: