使用Bootstrap 3时,nav-tabs行以最宽行倾向于顶部而较短行位于底部的方式进行换行:
这使得标签看起来很笨拙且不平衡。有没有办法可以修改导航标签,以便行底部更宽?更像这样:
这是产生第一张图片的JSFiddle。
<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>
答案 0 :(得分:5)
我知道从性能的角度来看这不是最好的解决方案,但无论如何......希望,这会有所帮助。此解决方案不依赖于特定的选项卡宽度,并提供您想要的结果。
JSFiddle: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());
}
});
答案 1 :(得分:4)
我已使用新的改进解决方案更新了答案。这是demo
function setTabs() {
let availableWidth = $('#nav-bar').outerWidth();
let liNodes = $('#nav-bar li');
liNodes.removeClass('clear');
let filledWidth = 0;
for (var i=liNodes.length-1; i>=0; i--) {
let currentWidth = $(liNodes[i]).outerWidth();
if (filledWidth + currentWidth <= availableWidth)
filledWidth += currentWidth;
else {
$(liNodes[i+1]).addClass('clear');
availableWidth = filledWidth;
filledWidth = currentWidth;
}
}
}
setTabs();
$(window).resize(_.debounce(setTabs, 200));
答案 2 :(得分:2)
您是否尝试执行the fiddle
中显示的内容您可以明确使用css clear技巧来实现您想要的效果。
.clear {
clear: both;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul class="nav nav-tabs" id="sync-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 class="clear"><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 class="clear"><a href="#">FooBar 10</a></li>
<li><a href="#">FooBar 11</a></li>
<li><a href="#">FooBar 12</a></li>
<li><a href="#">FooBar 13</a></li>
<li><a href="#">FooBar 14</a></li>
</ul>
</div>
</div>
</div>
答案 3 :(得分:1)
这是我根据你的要求做的小提琴
.nav-tabs
{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
align-items: flex-start;
}
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul class="nav nav-tabs" id="sync-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>
UPDATED FIDDLE LINK AS PER THE IMAGE GIVEN
希望这会有所帮助......
答案 4 :(得分:1)
我不明白你到底在找什么,并添加了以下css看起来很好https://jsfiddle.net/2tu6a2yh/2/
.nav-tabs {
display: table;
table-layout: fixed;
width : 100%;
}
.nav-tabs li {
display: table-cell;
width:120px; // constant width
}
答案 5 :(得分:1)
我认为您需要为每个列表项设置列大小,以获得更一致的外观。否则,根据它们包含的文本长度确定位置。我想,如果你进行一些试验,你会发现你想要的每个屏幕尺寸组合。尝试类似以下方法
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul class="nav nav-tabs" id="sync-tabs">
<li class="active col-sm-4"><a href="#">Foo Bar 1</a></li>
<li class="col-sm-4"><a href="#">FooBar 2</a></li>
<li class="col-sm-4"><a href="#">FooBar 3</a></li>
<li class="col-sm-4"><a href="#">FooBar 4</a></li>
<li class="col-sm-4"><a href="#">FooBar 5</a></li>
<li class="col-sm-4"><a href="#">FooBar 6</a></li>
<li class="col-sm-3"><a href="#">FooBar 7</a></li>
<li class="col-sm-3"><a href="#">FooBar 8</a></li>
<li class="col-sm-3"><a href="#">FooBar 9</a></li>
<li class="col-sm-3"><a href="#">FooBar 10</a></li>
<li class="col-sm-3"><a href="#">FooBar 11</a></li>
<li class="col-sm-3"><a href="#">FooBar 12</a></li>
<li class="col-sm-3"><a href="#">FooBarBaz 13</a></li>
<li class="col-sm-3"><a href="#">FooBarBaz 14</a></li>
</ul>
</div>