Bootstrap 4中Navbar内Container嵌套Row无法占满宽度求助

这个问题我之前也碰到过，核心是你没有遵循Bootstrap Navbar的组件布局逻辑，反而用了网格系统的row/col来包裹内容，导致布局不符合预期。

问题原因 #

• Bootstrap的row是为网格系统设计的，默认宽度依赖父容器，但你把所有Navbar元素（品牌链接、表单、切换按钮）都塞进了一个col里，这个col会被内部的inline/inline-block元素撑开，自然不会占满container的1170px宽度。
• Navbar本身有自己的响应式布局逻辑，直接嵌套row/col会打乱它的默认样式，尤其是折叠组件的行为。

解决方案一：遵循Navbar原生结构（推荐） #

不需要额外嵌套row和col，直接利用Navbar自带的类来布局，既能保证占满container宽度，又能保留响应式折叠功能：

<!-- Wrapper --> 
<div class="wrapper"> 
<nav class="navbar navbar-expand-md navbar-light bg-light"> 
  <div class="container">
    <!-- 品牌链接 -->
    <a class="navbar-brand" href="#">Navbar</a>
    
    <!-- 移动端切换按钮 -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <!-- 可折叠的内容容器 -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <!-- 用ml-auto把表单推到右侧 -->
      <form class="form-inline my-2 my-lg-0 ml-auto">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </div> 
</nav> 
</div> 
<!-- End of wrapper -->

解决方案二：强制Row占满宽度（仅当必须用row时） #

如果你一定要保留row/col的结构，需要给row添加w-100类强制它占满父容器宽度，同时把col设置为col-12（占满12列）：

<!-- Wrapper --> 
<div class="wrapper"> 
<nav class="navbar navbar-expand-md navbar-light bg-light"> 
<div class="container"> 
<div class="row w-100"> <!-- 添加w-100强制占满宽度 -->
<div class="col-12"> <!-- 明确设置为12列 -->
<a class="navbar-brand" href="#">Navbar</a> 
<form class="form-inline my-2 my-lg-0 ml-auto"> <!-- 用ml-auto推到右侧 -->
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> 
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
</form> 
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
<span class="navbar-toggler-icon"></span> 
</button> 
</div> 
</div> 
</div> 
</nav> 
</div> 
<!-- End of wrapper -->

为什么推荐方案一？ #

方案一完全遵循Bootstrap Navbar的设计规范，不仅能解决宽度问题，还能确保移动端折叠功能正常工作，避免后续出现更多布局冲突。方案二只是临时解决宽度问题，但会增加不必要的嵌套，可能影响Navbar的响应式表现。

内容的提问来源于stack exchange，提问作者Ehane Kalvein