Tab功能故障：第二个标签页文本显示在底部求助

你的Tab标签页布局问题主要是结构不符合Bootstrap Tab组件规范，加上标签闭合错误导致的，以下是修正后的完整代码，以及关键修改点说明：

<div class="card rounded-0 mx-1 my-auto align-self-stretch" 
     style="height:320px; width:450px; 
           background-image: url(https://i.pinimg.com/564x/a8/80/31/a88031d38378d6a22afa1524bddc4e90.jpg); 
           background-size:cover; 
           background-position:center; 
           background-repeat:no-repeat;
           background-color:#1c1a1b;
           color: #1c1a1b; 
           letter-spacing:1px; 
           font-weight: 600;">
 
  <ul class="nav row no-gutters justify-content-around text-center font-weight-bold text-uppercase" 
      style="letter-spacing: 1px;">
    <li class="nav-item col-auto"><a class="nav-link px-1 active" data-toggle="tab" href="#ONE" style="color:#423d40;">Info</a></li>
    <li class="nav-item col-auto"><a class="nav-link px-1" data-toggle="tab" href="#TWO" style="color:#423d40;">Likes & dislikes</a></li>
    <li class="nav-item col-auto"><a class="nav-link px-1" data-toggle="tab" href="#THREE" style="color:#423d40;">meow</a></li>
  </ul>

  <!-- 新增tab-content容器，所有tab-pane必须放在这个容器内 -->
  <div class="tab-content" style="height: calc(100% - 40px); overflow-y: auto;">
    <div class="tab-pane fade in active show" id="ONE">
      <p style="font-family:courier; text-align:center; font-weight:550; font-size:25px; margin: 0; padding: 0;">  meow  </p>
      <p style="font-family:courier; text-align:left; font-weight:400; font-size:18px; margin-left:10px;" >  
        <b> ★ nicknames </b>      meowable<br>
        <b> ★ pronouns </b>       meowable<br>
        <b> ★ age </b>               meowable<br>
        <b> ★ species </b>        meowable<br>
        <b> ★ occupation </b>      meowable<br>
        <b> ★ playlist </b>       <a href="   " target="_BLANK"> meowable </a>   
      </p> 
    </div> 

    <div class="tab-pane fade" id="TWO">
      <p style="font-family:courier; text-align:center; font-weight:550; font-size:25px;"> meow </p>
      <p style="font-family:courier; text-align:left; font-weight:400; font-size:18px; margin-left:10px;" >  
        <b> ★ meow </b>      meowable
      </p> <!-- 补上之前缺失的p标签闭合 -->
    </div> 

    <div class="tab-pane fade" id="THREE">
      <p style="font-family:courier; text-align:center; font-weight:550; font-size:25px;"> meow </p>
      <p style="font-family:courier; text-align:left; font-weight:400; font-size:18px; margin-left:10px;" >  
        <b> ★ 测试内容1 </b>      测试文本<br>
        <b> ★ 测试内容2 </b>      测试文本<br>
        <b> ★ 测试内容3 </b>      测试文本<br>
        <b> ★ 测试内容4 </b>      测试文本<br>
        <b> ★ 测试内容5 </b>      测试文本<br>
        <b> ★ 测试内容6 </b>      测试文本<br>
        <b> ★ 测试内容7 </b>      测试文本<br>
        <b> ★ 测试内容8 </b>      测试文本<br>
      </p>
    </div>
  </div>
</div>

关键修改点： #

1. 添加tab-content容器：Bootstrap要求所有tab-pane必须包裹在tab-content容器内，否则标签页内容无法正确隔离，这是第二个标签文本错位的核心原因。
2. 移除tab-pane上的data-toggle="tab"属性：这个属性只需要加在导航栏的<a>标签上，标签页内容区域不需要，多余属性会干扰布局逻辑。
3. 闭合缺失的标签：第二个标签页里的<p>标签没写闭合标签</p>，导致HTML结构错乱，内容被错误解析。
4. 添加滚动处理：给tab-content设置height: calc(100% - 40px)（减去导航栏高度）和overflow-y: auto，这样第三个标签内容过多时会自动出现滚动条，不会超出容器破坏布局。
5. 去除冗余的定位样式：第二个标签页的position: relative; top: 0; left: 0没有作用，直接移除即可。

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