Bootstrap 4 引导4卡导航

在Bootstrap4Beta中，您可以向卡组件添加导航。

但是，目前还没有一个实际的工作示例来说明如何在一张卡中的不同选项卡之间切换

例如，这对我不起作用。我也添加了javascript文件

<div class="card">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
                <a class="nav-link active" href="#foo">Foo</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#bar">Bar</a>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <div class="tab-content">
            <div class="tab-pane" id="foo">FOO</div>
            <div class="tab-pane" id="bar">BAR</div>
        </div>
    </div>
</div>

福
酒吧

像这样试试

<div class="card ">
    <div class="card-header"> 
        <ul class="nav nav-tabs card-header-tabs pull-right"  id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
            </li>
        </ul>
    </div>

    <div class="card-body">
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
        </div>
    </div>
</div>

...
...
...

---

了解更多有关它的信息

解决了它：您必须在每个ancor标记上放置

data toggle=“tab”

，才能启用选项卡