Bootstrap 4容器内Navbar宽度与父容器不一致问题求助

问题说明 #

使用Bootstrap 4搭建网站时，顶部滚动文本区域和导航栏分别用了两个container容器，但导航栏（Navbar）无法和父容器宽度保持一致，需要让两个容器及内部Navbar宽度统一。

原代码 #

<header>
    <!-- top header for scrolling text marque -->
    <div class="container">
        <div class="row">
          <div  style="background-color: black; border-color: orange;  width: 100%; height: 2rem" >
          </div>
        </div>
    </div>
    <!-- for menu -->
    <div class="container" style="border: 1px; border-color:red;border-style: double;height: 4rem;">
      <nav class="navbar navbar-expand-md" style="background-color:rgba(255, 255, 128);border-style: double;border-color: red;">
        <a class="navbar-brand" href="#">Navbar</a>
      </nav>
    </div>
</header>

解决方法 #

问题出在Bootstrap的navbar组件默认带有左右外边距（margin-left: auto、margin-right: auto），导致它无法占满父容器宽度。以下两种方法可以快速解决：

方法1：使用Bootstrap自带宽度类 #

给<nav>标签添加w-100类，强制元素宽度占满父容器：

<nav class="navbar navbar-expand-md w-100" style="background-color:rgba(255, 255, 128);border-style: double;border-color: red;">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

方法2：移除默认外边距 #

给<nav>标签添加mx-0类，清除左右外边距：

<nav class="navbar navbar-expand-md mx-0" style="background-color:rgba(255, 255, 128);border-style: double;border-color: red;">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

额外优化建议 #

• 导航栏所在的container设置了固定高度height:4rem，可以改用Bootstrap的py-3（上下内边距）类来控制高度，避免固定高度导致内容溢出或布局错位：

  <div class="container py-3" style="border: 1px; border-color:red;border-style: double;">
  

修改后的完整代码 #

<header>
    <!-- top header for scrolling text marque -->
    <div class="container">
        <div class="row">
          <div  style="background-color: black; border-color: orange;  width: 100%; height: 2rem" >
          </div>
        </div>
    </div>
    <!-- for menu -->
    <div class="container py-3" style="border: 1px; border-color:red;border-style: double;">
      <nav class="navbar navbar-expand-md w-100" style="background-color:rgba(255, 255, 128);border-style: double;border-color: red;">
        <a class="navbar-brand" href="#">Navbar</a>
      </nav>
    </div>
</header>

内容的提问来源于stack exchange，提问作者Binod Binani