在 Bootstrap 3 中,导航选项卡行的换行方式是最宽的行位于顶部,而较短的行位于底部:
这使得选项卡看起来笨拙且不平衡。有没有一种方法可以修改导航选项卡,使底部的行更宽?更多类似这样的:
这是JSFiddle https://jsfiddle.net/2tu6a2yh/产生了第一张图像。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Foo Bar 1</a></li>
<li><a href="#">FooBar 2</a></li>
<li><a href="#">FooBar 3</a></li>
<li><a href="#">FooBar 4</a></li>
<li><a href="#">FooBar 5</a></li>
<li><a href="#">FooBar 6</a></li>
<li><a href="#">FooBar 7</a></li>
<li><a href="#">FooBar 8</a></li>
<li><a href="#">FooBar 9</a></li>
<li><a href="#">FooBar 10</a></li>
<li><a href="#">FooBar 11</a></li>
<li><a href="#">FooBar 12</a></li>
<li><a href="#">FooBarBaz 13</a></li>
<li><a href="#">FooBarBaz 14</a></li>
</ul>
</div>
</div>
</div>
我知道从性能的角度来看这不是最好的解决方案,但是无论如何......希望这会有所帮助。该解决方案不依赖于特定的制表符宽度,并提供您想要的结果。
JSFiddle:https://jsfiddle.net/cpxd8eh0/6/ https://jsfiddle.net/cpxd8eh0/6/
$(function(){
var $container = $('#sync-tabs');
updateTabs($container);
$(window).resize(function(){
updateTabs($container);
});
function updateTabs($tabsContainer){
var $containerWidth = $tabsContainer.width();
var tabWidths = [];
var $tabs = $tabsContainer.find('li');
$tabs.each(function(index, tab){
tabWidths.push($(tab).width());
});
var formattedTabs = [];
var maxWidth = $containerWidth;
var maxWidthSet = false;
var rowWidth = 0;
for(var i = tabWidths.length - 1; i >= 0; i--){
var tabWidth = tabWidths[i];
if(rowWidth + tabWidth > maxWidth){
if(!maxWidthSet){
maxWidth = rowWidth;
maxWidthSet = true;
}
rowWidth = tabWidth;
formattedTabs.unshift($('<div class="spacer"></div>'));
}else{
rowWidth += tabWidth;
}
formattedTabs.unshift($tabs.get(i));
}
var $tempContainer = $('<div></div>');
formattedTabs.forEach(function(tab, index){
$tempContainer.append(tab);
});
$tabsContainer.html($tempContainer.html());
}
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)