Bootstrap Tabdrop не работает в MVC cshtml

Question

У меня есть страница бритвы mvc (cshtml), и я попытался реализовать вкладку bootstrp в нем. Я могу получить вкладки, однако табуляции не отображаются. Когда я запускаю один и тот же код в html-файле, я могу получить вкладки, а также вкладку, содержащую мои дополнительные имена вкладок. однако, когда я запускаю код в файле cshtml, он не отображается.

Дополнительные вкладки отображаются во второй строке, а табуляция также не отображается.

Tabdrops Source

Вот мой полный код моего файла cshtml, в котором я использовал tabdrop.js ...

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

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

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

Я в CSS файлы, сохраненные в место нахождения

Содержание \ css

и Javascript Файлы, сохраненные в папке

Content \ файл расслоение плотной

cshtml имеет самозагрузки тему ADMINLTE бутстрапе.

Может ли кто-нибудь помочь мне в этом? Я хочу знать, работает ли вкладка bootstrap с файлом cshtml или нет?

Answer 1

У меня был такой же выпуск. Плагин tabdrop инициализируется при изменении размера окна.

Я решил это, изменив размер окна после закладки init.

$(window).resize();