Html 引导3中的导航栏不是全宽

我试图在引导中创建一个100%宽度的导航栏，但它不起作用

<div class="container-fluid">
  <nav class="navbar navbar-inverse navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#"> WebsiteName </a>
      </div>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>
</div>

移除容器流体中的填充物，创建“自定义导航容器”类以覆盖

    <div class="container-fluid custom-nav-container">
        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#"> WebsiteName </a>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </nav>
    </div>

.custom-nav-container{
padding-left: 0px !important;
padding-right: 0px !important;
}

.定制导航集装箱{
左侧填充：0px！重要；
右填充：0px！重要；
}

更换

<div class="container-">

到

---

在你的标签里面。你的问题解决了。谢谢。

.container对于引导中的每个屏幕大小都有一个固定的宽度（xs、sm、md、lg）。它反应灵敏；但是，它是根据屏幕大小固定的.container fluid扩展以填充可用宽度。如果使用容器流体并调整浏览器大小，您可能会注意到其中的内容将随着每个像素的变化而调整，以获得完整的可用宽度

<div class="container">
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#"> WebsiteName </a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>
</div>

移除外部的

容器流体

类。您已经将

容器

添加到内部<代码>容器流体已填充我想创建一个投资组合网页。如果我删除容器流体，我的网页将如何响应？navbar不需要容器流体。将容器流体放置在其余内容中。或者使用CSST删除容器流体的填充谢谢，很抱歉我的愚蠢问题。

<div class="container">
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#"> WebsiteName </a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>
</div>