Bootstrap标签页tab-content内col类div无法横向并排显示问题

你使用的Bootstrap栅格系统有明确的层级要求：col-*系列栅格列类，必须作为带.row类的容器的直接子元素，才能触发横向排列的栅格布局效果。
你的代码里三个col-md-4的直接父元素是.tab-pane，外层没有包裹对应的.row容器，栅格的布局规则没有生效，div作为默认块级元素会独占一行，就出现了三个Test纵向排列的问题。

在.tab-pane容器内部，给三个col-md-4外层套一层<div class="row">即可，修改后的对应代码段如下：

<div class="col-md-12">
  <div class="tab-content">
    <div id="resPas" class="tab-pane fade show active">
      <!-- 新增row容器作为栅格列的直接父元素 -->
      <div class="row">
        <div class="col-md-4">Test</div>
        <div class="col-md-4">Test</div>
        <div class="col-md-4">Test</div>
      </div>
    </div>
  </div>
</div>

补充提示：你代码里导航栏部分用两个空的col-sm-2做两侧占位的写法可以简化，直接给中间的col-sm-8添加对应版本Bootstrap的偏移类（Bootstrap3用col-sm-offset-2，Bootstrap4/5用offset-sm-2）就能实现居中效果，不需要额外写空标签，不过这个写法不影响当前tab内容的排列效果。

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