Bootstrap响应式导航栏适配：移动端顶部/桌面端侧边布局疑问

嘿，你的第二个思路完全是对的！单个Row里放两个col-md-12不仅合规，而且这正是Bootstrap栅格系统为响应式场景设计的标准用法，完全不需要纠结这个问题。

为什么这个方案可行？ #

Bootstrap是移动优先的框架，响应式列类的优先级是从小屏幕到大屏幕逐步覆盖的。当屏幕尺寸小于md断点时，两个列都会应用col-md-12，各自占满整行宽度，自然上下堆叠——刚好对应你要的移动端“顶部导航+下方内容”布局；当屏幕达到lg及以上时，col-lg-2和col-lg-10会覆盖之前的类，两个列总宽度刚好填满Row，实现侧边导航和内容区的并排效果。

具体实现代码示例 #

<div class="container">
  <div class="row">
    <!-- 导航栏容器 -->
    <div class="col-md-12 col-lg-2">
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">我的站点</a>
        <!-- 移动端折叠按钮 -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mobileNav">
          <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 导航菜单 -->
        <div class="collapse navbar-collapse" id="mobileNav">
          <ul class="navbar-nav w-100">
            <li class="nav-item">
              <a class="nav-link active" href="#">首页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">产品</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">关于我们</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>

    <!-- 主内容容器 -->
    <div class="col-md-12 col-lg-10 p-4">
      <h1>欢迎来到主内容区</h1>
      <p>这里是页面的核心内容展示区域...</p>
      <!-- 更多内容 -->
    </div>
  </div>
</div>

为什么双Row方案行不通？ #

Row是Bootstrap栅格系统中的水平容器，每个Row默认是上下排列的独立块，哪怕你给里面的列设置了col-2和col-10，两个Row也没办法横向并排——除非你用自定义的浮动、定位或者flex布局，但这完全违背了栅格系统的设计初衷，反而会引入更多响应式兼容性问题，没必要舍近求远。

额外优化小技巧 #

• 如果想让移动端导航固定在顶部，可以给<nav>标签加上fixed-top类，记得给<body>添加padding-top: 70px左右的样式，避免内容被导航栏遮挡。
• 桌面端侧边导航可以加个固定高度或sticky-top类，让它在滚动时保持可见，提升用户体验。

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