带有选项卡和内容的 Bootstrap 5 卡

Question

我试图达到这种效果：https://www.w3schools.com/bootstrap/tryit.asp ?filename=trybs_ref_js_tab&stacked=h filename=trybs_ref_js_tab&stacked=h 使用 Bootstrap 5 并在 Bootstrap 卡中使用它。

我第一次尝试没有卡

我已经复制了上面的示例，但它不起作用https://jsfiddle.net/zqdsLeyj/

我已将整个页面放在上面的 JS 中，但这是我现在正在尝试实现的部分：

<div class="container network_wrapper col-sm p-2 ">
    <h2>Dynamic Tabs</h2>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
        <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
        <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
        <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
    </ul>

    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <h3>HOME</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et
                dolore magna aliqua.</p>
        </div>
        <div id="menu1" class="tab-pane fade">
            <h3>Menu 1</h3>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
                ea commodo consequat.
            </p>
        </div>
        <div id="menu2" class="tab-pane fade">
            <h3>Menu 2</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                laudantium, totam rem
                aperiam.</p>
        </div>
        <div id="menu3" class="tab-pane fade">
            <h3>Menu 3</h3>
            <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta
                sunt explicabo.</p>
        </div>
    </div>
</div>

由于某种原因，导航和选项卡样式或功能不起作用。

我想要实现的目标是在卡片中包含选项卡：

像这样的东西，显然不起作用：

<div class="container network_wrapper col-sm p-2 ">
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Network Settings</h5>
            <ul class="nav nav-tabs card-header-tabs" data-tabs="tabs">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="true" data-toggle="tab"
                        href="#dhcp">DHCP</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#static">Static</a>
                </li>
            </ul>
        </div>
        <form class="card-body" class="tab-content">
            <div class="tab-pane" id="dhcp>
                <p class=" card-text">Change DHCP Network settings.</p>
            </div>
            <div class="tab-pane" id="static>
                <p class=" card-text">Change Static Network settings.</p>
            </div>
            <button class="btn btn-primary" type="submit">Save</button>
        </form>
    </div>
</div>

我也尝试过这个： https: //www.codegrepper.com/code-examples/whatever/bootstrap+card+with+working+nav+tabs无济于事。

我没有尝试过使用 JS，也不是在寻找 JS 解决方案，因为该功能肯定是在 Bootstrap 5 中内置的。我只是不明白如何使用它。

我已将 bootstrap CSS（head选项卡内）和 JS（标记末尾body）添加到我的 HTML 文件中：

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
        crossorigin="anonymous"></script>

Answer 1

修复不正确的 HTML 结构，并遵循 Bootstrap 文档中的指导。Bootstrap 5 使用data-bs-不data-属性...

       <div class="card">
            <div class="card-header">
                <h5 class="card-title">Network Settings</h5>
                <ul class="nav nav-tabs card-header-tabs" data-bs-tabs="tabs">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="true" data-bs-toggle="tab" href="#dhcp">DHCP</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#static">Static</a>
                    </li>
                </ul>
            </div>
            <form class="card-body tab-content">
                <div class="tab-pane active" id="dhcp">
                    <p class="card-text">Change DHCP Network settings.</p>
                </div>
                <div class="tab-pane" id="static">
                    <p class=" card-text">Change Static Network settings.</p>
                </div>
                <button class="btn btn-primary" type="submit">Save</button>
            </form>
       </div>

https://codeply.com/p/t6GGNuV2yb