Question

我想在一个表中使用Bootstrap Nav Pills，并在最后一个表的行中使用“选项卡按钮”。制表符内容在表格之外。我试过了，但是没用。

    <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>

Answer 1

要使其正常工作：

nav-tabs和tab-content类必须是同级兄弟才能使其工作……这是通过将表与nav-tabs放入div来使之起作用
此外，带有data-toggle="tab"的DOM元素必须彼此兄弟姐妹...因此我们将data-toggle="tab"从<a>内部的<td>移到{{1 }}本身

工作片段如下：

<td>

根据提问者对先前代码的观察进行更新...

在表中引导净丸

1 个答案: