【问题标题】: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,所以在你的情况下,&lt;li /&gt; 需要.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/

    【讨论】:

      猜你喜欢
      • 2020-03-04
      • 1970-01-01
      • 2015-10-25
      • 1970-01-01
      • 2016-07-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-07-07
      相关资源
      最近更新 更多