container-fluid未占满页面宽度：row与col导致内容宽度异常

嗨，我来帮你捋清楚这个问题～你遇到的情况很典型，主要是布局结构嵌套错误和Bootstrap栅格规则没吃透导致的，下面一步步给你解决：

问题根源拆解 #

当你用<p>标签时，它是块级元素会自动占满父容器宽度；但用row和col时，Bootstrap的栅格系统有自己的规则：

• row默认带有左右负margin，用来抵消父容器的padding；
• 如果row没有正确嵌套在container/container-fluid里，或者内容区没有和侧边栏做好空间分配，就会出现内容被挤压、只占一半的情况。

正确的布局结构示例 #

你需要用Flex布局来协调侧边栏和内容区的空间，同时严格遵循Bootstrap的栅格嵌套规则：

<!-- 整体Flex容器，侧边栏+内容区横向排列 -->
<div class="d-flex vh-100">
  <!-- 可折叠侧边栏 -->
  <div class="sidebar bg-light">
    <!-- 侧边栏内容，比如折叠按钮、菜单 -->
    <button class="btn btn-primary" type="button">折叠侧边栏</button>
    <ul class="nav flex-column">
      <li class="nav-item"><a class="nav-link" href="#">菜单1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">菜单2</a></li>
    </ul>
  </div>

  <!-- 内容区：设置flex-grow-1占满剩余空间 -->
  <div class="content flex-grow-1 d-flex flex-column">
    <!-- 顶部Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
      </div>
    </nav>

    <!-- 内容容器：必须用container/container-fluid包裹row -->
    <div class="container-fluid flex-grow-1 overflow-auto">
      <div class="row mt-4">
        <div class="col">
          <!-- 这里的内容会自动占满内容区宽度 -->
          <h3>测试内容</h3>
          <p>现在用row和col也能占满整个内容区啦！</p>
        </div>
      </div>
      <!-- 可以添加更多row/col -->
      <div class="row mt-4">
        <div class="col-md-6 bg-info p-3">左侧列</div>
        <div class="col-md-6 bg-warning p-3">右侧列</div>
      </div>
    </div>
  </div>
</div>

关键注意点 #

• Flex布局的空间分配：给内容区加flex-grow-1，确保侧边栏显示/隐藏时，内容区自动填充剩余宽度；
• 栅格嵌套规则：row必须放在container或container-fluid内部，否则会出现偏移或宽度异常；
• 自定义样式排查：检查你自己写的CSS，有没有给row/col/内容区设置固定宽度（比如width: 50%），这会直接导致内容缩窄。

按照这个结构调整后，你的row/col应该就能正常占满内容区宽度啦～

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