Bootstrap 5标签只能在第二次点击时工作,并且间隔很奇怪[关闭]

vsdwdz23  于 2023-05-15  发布在  Bootstrap
关注(0)|答案(1)|浏览(147)

**关闭。**这个问题是not reproducible or was caused by typos。目前不接受答复。

此问题是由打印错误或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里,这一个是解决的方式不太可能帮助未来的读者。
昨天关门了。
Improve this question
我有两个标签,当我想去第二个标签;我得点击两次。第二个标签上的文本也间隔了一点。有人知道我做错了什么吗?
我试过使用不同的CDN进行引导,但这似乎并没有修复产品。
代码如下:

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>

<link href="main.css" rel="stylesheet">

<link href="https://cdn.datatables.net/v/dt/dt-1.13.2/datatables.min.css" />

<div class="container-fluid d-flex justify-content-center">
  <div class="col-md-9">
    <ul class="nav nav-tabs mb-3" id="pills-tab" role="tablist">
      <li class="nav-link active" role="presentation"><button class="nav-link" id="pills-0-tab" data-bs-toggle="pill" data-bs-target="#pills-0" type="button" role="tab" aria-controls="pills-1" aria-selected="false">Len van Vliet</button></li>
      <li class="nav-item" role="presentation"><button class="nav-link" id="pills-1-tab" data-bs-toggle="pill" data-bs-target="#pills-1" type="button" role="tab" aria-controls="pills-2" aria-selected="false">Tes Abraha</button></li>
    </ul>
    <div class="tab-content" id="pills-tabContent">
      <div class="tab-pane active in show" id="pills-0" role="tabpanel" aria-labelledby="pills-0-tab">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Klantnaam</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <h3>Len</h3>
            <h6><i>De volgende zaken zijn nog niet geregistreerd:</h6>
                  </i>
              <tr>
                <th scope="row">1</th>
                <td>Moss Last Mile Heroes</td>
                <td>
                  <a href="" target="_blank"> <button type="button" class="btn btn-danger">Registreer</button></a>
                </td>
              </tr>
          </tbody>
        </table>
      </div>
      <div class="tab-pane fade" id="pills-1" role="tabpanel" aria-labelledby="pills-1-tab">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Klantnaam</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <h3>Tes </h3>
            <h6><i>De volgende zaken zijn nog niet geregistreerd:</h6>
                  </i>
              <tr>
                <th scope="row">1</th>
                <td>Salvador Massage Services</td>
                <td>
                  <a href="" target="_blank"> <button type="button" class="btn btn-danger">Registreer</button></a>
                </td>
              </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
a0zr77ik

a0zr77ik1#

你有一些错误在你的标记,他们是固定的,一些围绕h6和图标标签
选项卡的问题是button和li元素做相同的选项卡定义,所以这是重复的选项卡
我已经删除了按钮,只留下li项目作为标签,现在它是工作
匹配包含的css和js外部文件版本
请与您自己的代码比较以查看完整的编辑

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

<link href="main.css" rel="stylesheet">

<link href="https://cdn.datatables.net/v/dt/dt-1.13.2/datatables.min.css" />

<div class="container-fluid d-flex justify-content-center">
  <div class="col-md-9">
  
    <ul class="nav nav-tabs mb-3" id="pills-tab" role="tablist">
      <li class="nav-link active" role="presentation" id="pills-0-tab" data-bs-toggle="pill" data-bs-target="#pills-0" role="tab" aria-controls="pills-1" aria-selected="true">
<!--removed button-->
        Len van Vliet
      </li>
      <li class="nav-link" role="presentation" id="pills-1-tab" data-bs-toggle="pill" data-bs-target="#pills-1" role="tab" aria-controls="pills-2" aria-selected="false">
<!--removed button-->
        Tes Abraha
      </li>
    </ul>
    
    <div class="tab-content" id="pills-tabContent">
      <div class="tab-pane active in show" id="pills-0" role="tabpanel" aria-labelledby="pills-0-tab">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Klantnaam</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <h3>Len</h3>
<!--fixed markup-->
            <h6><i>De volgende zaken zijn nog niet geregistreerd:</i></h6>
              <tr>
                <th scope="row">1</th>
                <td>Moss Last Mile Heroes</td>
                <td>
                  <a href="" target="_blank"> <button type="button" class="btn btn-danger">Registreer</button></a>
                </td>
              </tr>
          </tbody>
        </table>
      </div>
      <div class="tab-pane fade" id="pills-1" role="tabpanel" aria-labelledby="pills-1-tab">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Klantnaam</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <h3>Tes </h3>
<!--fixed markup-->
            <h6><i>De volgende zaken zijn nog niet geregistreerd:</i></h6>
              <tr>
                <th scope="row">1</th>
                <td>Salvador Massage Services</td>
                <td>
                  <a href="" target="_blank"> <button type="button" class="btn btn-danger">Registreer</button></a>
                </td>
              </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

相关问题