Bootstrap可折叠Navtabs菜单项在最大化窗口时不返回正常列表模式

Question

我正在尝试将bootstrap可折叠导航栏效​​果应用于navtabs。它在响应模式下工作正常但是当进入桌面模式或从响应模式最大化窗口时，'navstack'和'collapse in'类仍然适用于navtabs。这导致我面对列表菜单垂直显示的错误并且不是水平地占据整个宽度。

并且当单击导航切换时，导航栏折叠也不会平滑地隐藏导航按钮。此处附有错误的屏幕截图，以便于理解。

HTML

<div class="portlet-title tabbable-line" >
<div class="caption" style="padding-left: 10px">
    <h3 class="media-heading" id="doctornamevalue"></h3>
</div>
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#emr_schedule_menu">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>

<div class="collapse navbar-collapse" id="emr_schedule_menu">
    <ul class="nav nav-tabs pull-right">
        <li style="border-bottom: 0px solid #ffffff; display:none;">
            <select class="form-control input-medium" style="width: auto; margin-left: 5px; display: none; margin-right: 150px;" data-placeholder="Choose a Category" id="mypatientlist" onchange="LoadselectedPatient();"></select>
        </li>
        <li class="" id="activeVideo">
            <a href="#tab_5" data-toggle="tab" onclick="TabHide(5);">Live Chat </a>
        </li>
        <li class="" id="activecrosscover">
            <a href="#tab_4" data-toggle="tab" onclick="TabHide(4);">CrossCover  </a>
        </li>
        <li id="activemypatient">
            <a href="#tab_3" data-toggle="tab" onclick="TabHide(3);">MyList  </a>
        </li>
        <li id="activeippatient">
            <a href="#tab_2" data-toggle="tab" onclick="TabHide(2);">InPatient </a>
        </li>
        <li id="activeoppatient">
            <a href="#tab_1" data-toggle="tab" onclick="TabHide(1);">MyPatient</a>
        </li>
        <li class="" id="activeschedule">
            <a href="#tab_0" data-toggle="tab" onclick="TabHide(0);">Schedule </a>
        </li>
         <li class="" id="activehome">
            <a href="#tab_6" data-toggle="tab" onclick="TabHide(6);">Home </a>
        </li>
    </ul>
</div>

JS

$('#emr_schedule_menu').on('show.bs.collapse', function() {
    $('.nav-tabs').addClass('nav-stacked').removeClass('pull-right');
});

//Unstack menu when not collapsed
$('#emr_schedule_menu').on('hide.bs.collapse', function() {
    $('.nav-tabs').removeClass('nav-stacked').addClass('pull-right');
});

截图