Twitter bootstrap 表中的引导导航丸

我想在一个表中使用引导导航，并在最后一个表的行中使用“选项卡按钮”。 选项卡内容在表之外。我试过了，但没用

用户名单
#
弗斯特
最后
手柄
……家。。
轮廓
…联系。。。

要使其正常工作：

• 类

  导航选项卡

  和

  选项卡内容

  需要是同级才能使其工作。。。这是通过将表格放在带有

  nav选项卡的div中来实现的

• 此外，具有

  data toggle=“tab”

  的DOM元素必须是彼此的兄弟元素。。。因此，我们将此

  data toggle=“tab”

  从

  
  ……家。。
  轮廓
  …联系。。。
  

  谢谢，但如果我单击“主页”，然后单击“个人资料”，之后我将无法再单击“主页”，因为它仍处于激活状态。你可以在片段hi@sparkle中看到同样的行为，我希望你有一个美好的圣诞节。。。根据您的观察，我已经更新了答案，请核对，谢谢。圣诞快乐。我刚刚为格式化添加了以下内容：

      <table class="table">
    <caption>List of users</caption>
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th></th>
        <td> <a data-toggle="tab" href="#home">BUTTON HERE</a>    </td>
        <td> <a data-toggle="tab" href="#profile">BUTTON HERE</a> </td>
        <td> <a data-toggle="tab" href="#contact">BUTTON HERE</a> </td>
      </tr>
    </tbody>
  </table>
  
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel">...home..</div>
    <div class="tab-pane fade" id="profile" role="tabpanel">...profile...</div>
    <div class="tab-pane fade" id="contact" role="tabpanel">...contact...</div>
  </div>