Bootstrap 4-导航选项卡和药丸-显示项目符号点

时间:2019-02-19 14:31:40

标签: css asp.net-mvc twitter-bootstrap tabs bootstrap-4

我目前正在使用ASP.Net MVC Core 2.0 Web应用程序,该应用程序在生产中已安装了引导程序3.3.7,但是我们希望跳至引导程序4.3.1。

但是,我遇到一个问题,即我使用的所有Nav选项卡和Nav药丸都显示

  • 要点
  • 在标签中,如下图所示。

    我在导航选项卡上出现问题的地方正在使用的代码是

    <ul class="nav nav-tabs">
                @{
                    var firstTab = true;
                    foreach (var year in Model.UniqueYears)
                    {
                        if (!string.IsNullOrWhiteSpace(academicYear))
                        {
                            //If there are any scheduled courses that are associated with that delivery method via name, then show the tab.
                            if (Model.ScheduledCourses.Where(scheduledCourse => scheduledCourse.year == year.Split(' ')[0]).Any())
                            {
                                <li class="nav-item @(firstTab ? "active" : "")">
                                    <a class="nav-link" href="#year-@year.GenerateSlug()" data-toggle="tab" role="tab">@academicYear</a>
                                </li>
                                firstTab = false;
                            }
                        }
                    }
                }
            </ul>
    

    ,结果如下图所示。

    enter image description here

    如果有人可以帮助我删除

  • 要点
  • ,我将不胜感激

    我已经尝试从

    添加基本的\ Plain \示例代码

    https://getbootstrap.com/docs/4.0/components/navs/#tabs

    但是,遇到同样的问题。

    在布局中引入css项的顺序是

        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
        <link rel="stylesheet" href="~/lib/slick-carousel/slick/slick.css" />
        <link rel="stylesheet" href="~/lib/slick-carousel/slick/slick-theme.css" />
        <link rel="stylesheet" href="~/lib/slick-lightbox/dist/slick-lightbox.css" />
        <link rel="stylesheet" href="~/css/@(CultureInfo.CurrentCulture.Name.ToLower()).css" />
    

    并且将js像下面一样拉入

    <environment include="Development">
        <script src="~/lib/jquery-ui/jquery-ui.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    
        <script src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>
    

    任何人和所有人都非常感谢。

    0 个答案:

    没有答案