ASP.NET MVC Core 3.1 无法正确呈现 bootstrap 选项卡

Question

我必须在包含 bootstrap 4.3.1 的 ASP.NET MVC 3.1 中实现 Tab 控件。请你帮助我好吗？我刚刚将 HTML 标记如下：

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

<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        <h3>HOME</h3>
        <p>Some content.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Some content in menu 1.</p>
    </div>
</div>

这没有正确呈现选项卡，类似于下面的屏幕截图：

我想呈现如下所示的选项卡：

Answer 1

为什么人们不先参考 Bootstrap documentation 来检查它们是否具有有效结构？

在 .nav 之后需要 .nav-item，因此在您的情况下，<li /> 需要 class .nav-item.
锚标记需要 .nav-link，这会引入一些填充。
.in 改为 .show.

演示： https://jsfiddle.net/davidliang2008/sarmvoct/16/

您可以使用内边距 .tab-content 样式来创建与您的屏幕截图相匹配的内容：

.tab-content {
    padding: 1rem .25rem;
}

演示： https://jsfiddle.net/davidliang2008/sarmvoct/20/

ASP.NET MVC Core 3.1 无法正确呈现 bootstrap 选项卡

ASP.NET MVC Core 3.1 not rendering bootstrap tab properly

bootstrap-tabs

asp.net-core

bootstrap-4