Bootstrap栅格布局问题：内容未显示在右侧指定区域

问题根源 #

你在左侧导航的col-sm-3 col-md-2外层多套了一个无类名的<div>，这破坏了Bootstrap栅格系统的核心规则——列（col）必须直接作为行（row）的子元素。额外的父级div会干扰Bootstrap的flex/浮动布局逻辑，导致右侧的列无法正确占据指定宽度，内容被挤压到左侧区域。

修复后的HTML代码 #

<div class="container-fluid">
  <div class="row">
      <!-- 移除外层多余的div，让col直接作为row的子元素 -->
      <div class="col-sm-3 col-md-2 awesome_border">
          <ul class="nav flex-column gotodown">
              <li class="nav-item coolbox">
              <a class="nav-link active" aria-current="page" href="#">Stats</a>
              </li>
              <li class="nav-item coolbox">
              <a class="nav-link" href="#">Graphs</a>
              </li>
              <li class="nav-item coolbox">
              <a class="nav-link" href="#">Users</a>
              </li>
          </ul>

          <br>

          <ul class="nav flex-column gotodown boxbox">
              <li class="nav-item coolbox">
              <a class="nav-link active" aria-current="page" href="#">Reports</a>
              </li>
              <li class="nav-item coolbox">
              <a class="nav-link" href="#">Revenue</a>
              </li>
              <li class="nav-item coolbox">
              <a class="nav-link" href="#">Countries</a>
              </li>
              <li class="nav-item coolbox">
                  <a class="nav-link" href="#">Spammers</a>
              </li>
          </ul>
      </div>    
      <div class="col-sm-9 col-md-10">
          <ul class="nav flex-column">
              <li class="nav-item"><h2>Bruh</h2></li>
          </ul>
      </div>
  </div>
</div>

补充说明 #

• Bootstrap栅格的层级结构必须严格遵循container/container-fluid → row → col-*的嵌套关系，任何额外的非栅格元素插入到row和col之间，都会导致布局错乱。
• 你的CSS代码无需修改，保持原样即可。

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