引导选项卡功能是否因为我的 css 文件而无法工作？

Question

我想在网站的侧边栏中使用引导选项卡，但我无法使用它，因为不幸的是，当我将选项卡放入相关的 sidebar-parsel-liste 类中时，它不起作用。

当我在 sidebar-parcel-list 类之外的任何位置的代码中添加选项卡标签时，代码工作正常，我可以在选项卡之间切换。

我的代码； ` 帕尔塞尔 卡蒂 凯代特

---

比娜 德埃尔莱姆 穆尔克·比尔吉 拉波尔 塔克比斯

                        <!-- navbar başlangıcı tabs -->
                        <div class="card-body">
                            <h4 class="card-title m-b-40">Tab with dropdown</h4>
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item"> <a class="nav-link" id="home-tab" data-toggle="tab"
                                        href="#home5" role="tab" aria-controls="home5" aria-expanded="true"
                                        aria-selected="false"><span class="hidden-sm-up"><i
                                                class="ti-home"></i></span> <span
                                            class="hidden-xs-down">Home</span></a> </li>
                                <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab"
                                        href="#profile5" role="tab" aria-controls="profile"
                                        aria-selected="false"><span class="hidden-sm-up"><i
                                                class="ti-user"></i></span> <span
                                            class="hidden-xs-down">Profile</span></a></li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#"
                                        role="button" aria-haspopup="true" aria-expanded="false">
                                        <span class="hidden-sm-up"><i class="ti-email"></i></span> <span
                                            class="hidden-xs-down">Dropdown</span>
                                    </a>
                                    <div class="dropdown-menu" x-placement="bottom-start"
                                        style="position: absolute; transform: translate3d(0px, 39px, 0px); top: 0px; left: 0px; will-change: transform;">
                                        <a class="dropdown-item active show" id="dropdown1-tab" href="#dropdown1"
                                            role="tab" data-toggle="tab" aria-controls="dropdown1"
                                            aria-selected="true" aria-expanded="true">@fat</a> <a
                                            class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab"
                                            data-toggle="tab" aria-controls="dropdown2">@mdo</a> </div>
                                </li>
                            </ul>
                            <div class="tab-content tabcontent-border p-20" id="myTabContent">
                                <div role="tabpanel" class="tab-pane fade" id="home5" aria-labelledby="home-tab">
                                    <p>0</p>
                                </div>
                                <div class="tab-pane fade" id="profile5" role="tabpanel"
                                    aria-labelledby="profile-tab">
                                    <p>1</p>
                                </div>
                                <div class="tab-pane fade active show" id="dropdown1" role="tabpanel"
                                    aria-labelledby="dropdown1-tab">
                                    <p>2</p>
                                </div>
                                <div class="tab-pane fade" id="dropdown2" role="tabpanel"
                                    aria-labelledby="dropdown2-tab">
                                    <p>3</p>
                                </div>
                            </div>
                        </div>

`

我该如何解决这个问题？

Answer 1

<ul class="nav nav-pills" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link " id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" role="tab" aria-controls="profile-tab-pane" aria-selected="true">Profile</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#tab1" id="tab1-tab" data-bs-toggle="tab" data-bs-target="#tab1-tab-pane" role="tab" aria-controls="tab1-tab-pane" aria-selected="true">Tab 1</a></li>
      <li><a class="dropdown-item" href="#tab2" id="tab2-tab" data-bs-toggle="tab" data-bs-target="#tab2-tab-pane" role="tab" aria-controls="tab2-tab-pane" aria-selected="true">tab 2</a></li>
    </ul>
  </li>
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">Home</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">Profile</div>
  <div class="tab-pane fade" id="tab1-tab-pane" role="tabpanel" aria-labelledby="tab1-tab" tabindex="0">Tab 1</div>
  <div class="tab-pane fade" id="tab2-tab-pane" role="tabpanel" aria-labelledby="tab2-tab" tabindex="0">Tab 2</div>
</div>

工作引导选项卡功能中的演示代码，
我正在使用 Bootstrap 5.3，这段代码应该可以解决您的问题。

谢谢。