Question

我有一个mvc razor页面（cshtml），我试图在其中实现bootstrp ratab。我能够获取选项卡，但不显示tabdrops。当我在html文件中运行相同的代码时，我能够获取选项卡以及包含我的额外选项卡名称的tabdrop。但是，当我在cshtml文件中运行代码时，它不会显示。

额外的标签显示在第二行，并且也没有显示标签。

Tabdrops Source

这是我的cshtml文件的完整代码，其中我使用了tabdrop.js ...

＆＃13;

<script src="Content/js/jquery-1.11.2.js"></script>
<script src="Content/js/bootstrap-tab.js"></script>
<script src="Content/js/bootstrap-tabdrop.js"></script>
<script src="Content/js/bootstrap-dropdown.js"></script>
<script>
    if (top.location != location) {
        top.location.href = document.location.href;
    }
    $(function () {
        window.prettyPrint && prettyPrint();
        $('.nav-tabs:first').tabdrop();
        $('.nav-tabs:last').tabdrop({ text: 'More options' });
        $('.nav-pills').tabdrop({ text: 'With pills' });
    });
</script>

＆＃13;

<link href="~/Content/css/bootstrap-tabdrop.css" rel="stylesheet" />

＆＃13;

<div>
    <div class="wrapper row-offcanvas row-offcanvas-left">
        <!-- Left side column. contains the logo and sidebar -->
        <!-- Right side column. Contains the navbar and content of the page -->
        <aside class="right-side">
            <!-- Main row -->
            <div class="row">
                <!-- Left col -->
                <section class="col-lg-6 connectedSortable">
                    <!-- Box (with bar chart) -->
                    <div id="loading-example">
                        <div class="box-body no-padding">
                            <div class="row">
                                <div class="col-sm-7">
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <section class="content">
                <ul class="nav nav-tabs tabs-example" role="tablist">
                    <li class="active"><a href="#tabs-tab1" role="tab" data-toggle="tab">Tab 1</a></li>
                    <li><a href="#tabs-tab2" role="tab" data-toggle="tab">Tab 2</a></li>
                    <li><a href="#tabs-tab3" role="tab" data-toggle="tab">Tab 3</a></li>
                    <li><a href="#tabs-tab4" role="tab" data-toggle="tab">Tab 4</a></li>
                    <li><a href="#tabs-tab5" role="tab" data-toggle="tab">Tab 5</a></li>
                    <li><a href="#tabs-tab6" role="tab" data-toggle="tab">Tab 6</a></li>
                    <li><a href="#tabs-tab7" role="tab" data-toggle="tab">Tab 7</a></li>
                    <li><a href="#tabs-tab8" role="tab" data-toggle="tab">Tab 8</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tabs-tab1">
                        <p>This is tab 1!</p>
                        
                    </div>
                    <div class="tab-pane" id="tabs-tab2">
                        <p>This is tab 2!</p>
                        
                    </div>
                    <div class="tab-pane" id="tabs-tab3">
                        <p>This is tab 3!</p>
                        
                    </div>
                    <div class="tab-pane" id="tabs-tab4">
                        <p>This is tab 4!</p>
                        
                    </div>
                    <div class="tab-pane" id="tabs-tab5">
                        <p>This is tab 5!</p>
                        
                    </div>
                    <div class="tab-pane" id="tabs-tab6">
                        <p>This is tab 6!</p>
                        
                    </div>
                    <div class="tab-pane" id="tabs-tab7">
                        <p>This is tab 7!</p>
                        
                    </div>
                    <div class="tab-pane" id="tabs-tab8">
                        <p>This is tab 8!</p>
                        
                    </div>
                </div>
               
                <!-- top row -->
                <!-- /.row -->
            </section><!-- /.content -->
        </aside>
    </div>
</div>

＆＃13;

我将css文件存储在

位置

内容\ CSS

和存储在该位置的Javascript文件

内容\ JS

cshtml文件的引导主题为ADMINLTE bootstrap。

任何人都能帮助我吗？我想知道bootstrap tabdrops是否与cshtml文件一起使用？

Answer 1

我有同样的问题。当窗口重新调整大小时，tabdrop插件会初始化。

我通过在init tabdrop之后调整窗口大小来解决它。

$(window).resize();

Bootstrap Tabdrop在MVC cshtml中不起作用

1 个答案: