1
对于我正在处理的新引导网站,我在导航选项卡堆栈时对活动选项卡进行排序,以便选定选项卡始终连接到选项卡窗格。虽然这有效,但对我来说感觉就像是一种黑客。有没有更好的方法来实现这一点,保留原始的标签顺序?在堆叠时使用活动引导选项卡
HTML标记:
<div id="tab-bundle" class="container-fluid">
@Html.HiddenFor(model => model.SelectedBundle)
<ul class="nav nav-tabs" id="coverageTabs">
<li><a href="#Minimum">@LanguageDb.Me.Minimum</a></li>
<li><a href="#Better">@LanguageDb.Me.Better</a></li>
<li><a href="#Best">@LanguageDb.Me.Best</a></li>
<li><a href="#Custom">@LanguageDb.Me.Custom</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active bg-info" id="ajaxPanel">
@Html.Partial("SelectedBundle", Model)
</div>
</div>
</div>
的Javascript:
$(document).ready(function() {
var updateCoverage = function (e) {
e.preventDefault();
var $tab = $(this);
$('#SelectedBundle').val($(this).attr("href").substr(1));
$('#coverageTabs a').css({ backgroundColor: "", color: "" });
// ajax omitted for brevity
$tab.tab('show').css('background-color', $('#ajaxPanel').css('background-color')).css('color', $('#ajaxPanel').css('color'));
if ($('#coverageTabs').width() < 768) {
$tab.closest('li').appendTo('#coverageTabs');
}
};
$('a[href=#' + $('#SelectedBundle').val() + ']').tab('show').css('background-color', $('#ajaxPanel').css('background-color')).css('color', $('#ajaxPanel').css('color')); ;
$('#coverageTabs a').click(updateCoverage);
});
我有机会尝试了这一点,发现将ul更改为显示:flex阻止引导程序堆叠选项卡。这仍然有帮助,但是由于它删除了一些预期的引导程序功能,我不得不将其作为接受的答案删除它。 – B2K
对不起。我将在下次考虑用于Bootstrap相关问题的flexbox解决方案时记住这一点。 –
找到了解决方案'@media screen and(max-width:768px){ul {flex-direction:column;}}' – B2K