如何使Navs CSS更宽

问题描述

我有这个页脚，并且内部有一个导航栏，我想同时制作一个顶部导航栏和页脚侧栏，我想将它们扩大一点。如何实现呢？

<footer class="footer">

<div class="container" id="maincontainer">
    <nav class="navbar navbar-expand-lg bg-success navbar-dark">
        <a class="navbar-brand">
            <i class="fas fa-car-crash"></i>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" asp-controller="home" asp-action="index">| Registered brokers |</a>
                    </li>
                </ul>
            </div>
    </nav>
</div>

解决方法

宽度由Bootstrap's .container定义。您也可以将其替换为.container-xl或类似的名称，以修改不同观点上的行为。请查看此表，该表是从上面发布的链接中检索的：

要为大型设备> 1200px添加另一个最大宽度（请看一下不同的媒体查询here），您需要添加一个自定义类，例如.custom-container并覆盖{{ 1}}对应您希望的宽度，如下所示：

max-width

<div class="container custom-container" id="maincontainer">
    <nav class="navbar navbar-expand-lg bg-success navbar-dark">
        <a class="navbar-brand">
            <i class="fas fa-car-crash"></i>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" asp-controller="home" asp-action="index">| Registered Brokers |</a>
                    </li>
                </ul>
            </div>
    </nav>
</div>

如果您始终想将窗口的宽度定义为@media(min-width:1200px) { .custom-container { max-width: 1200px !important; // Your custom value } } ，请用100%替换.container。

,

.container-fluid {
width: 80% !important;

}

这对我有所帮助。 感谢@ shahryar-mohajer