Question

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

Answer 1

我知道从性能的角度来看这不是最好的解决方案，但无论如何......希望，这会有所帮助。此解决方案不依赖于特定的选项卡宽度，并提供您想要的结果。

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());
  }
});

Answer 2

我已使用新的改进解决方案更新了答案。这是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));

Answer 3

您是否尝试执行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>

Answer 4

这是我根据你的要求做的小提琴

FIDDLE LINK

.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

希望这会有所帮助......

Answer 5

我不明白你到底在找什么，并添加了以下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
}

Answer 6

我认为您需要为每个列表项设置列大小，以获得更一致的外观。否则，根据它们包含的文本长度确定位置。我想，如果你进行一些试验，你会发现你想要的每个屏幕尺寸组合。尝试类似以下方法

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

Alter Bootstrap导航标签行换行

6 个答案: