ASP.NET MVC Core 3.1 未正确呈现引导选项卡

【问题标题】：ASP.NET MVC Core 3.1 not rendering bootstrap tab properlyASP.NET MVC Core 3.1 未正确呈现引导选项卡
【发布时间】：2020-11-30 14:46:07
【问题描述】：

我必须在包含引导程序 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>

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

我想将标签呈现如下：

【问题讨论】：

标签： asp.net-core bootstrap-4 bootstrap-tabs

【解决方案1】：

为什么人们不首先引用Bootstrap documentation 来检查他们是否具有有效的结构？

在.nav 之后需要.nav-item，所以在你的情况下，<li /> 需要.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/

【讨论】：