Alter Bootstrap导航标签行换行 [英] Alter Bootstrap nav tabs row wrapping

问题描述

使用Bootstrap 3时，nav-tabs行以一种最宽行倾向于顶部而较短行位于底部的方式进行换行：

这使标签看起来很笨拙且不平衡。有没有办法可以修改导航标签，以便行底部更宽？更像是这样：

这是

  $（function（）{
 var $ container = $（'＃sync-tabs'）; 
 
 updateTabs（$ container）; 
 $（window）.resize（function （）{
 updateTabs（$ container）; 
}）; 
 
函数updateTabs（$ tabsContainer）{
 var $ containerWidth = $ tabsContainer.width（）; 
 var tabWidths = []; 
 var $ tabs = $ tabsContainer.find（'li'）; 
 $ tabs.each（function（index，tab）{
 tabWidths。推（$（标签）.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（））; 
} 
}）; 
  

With Bootstrap 3, rows of nav-tabs wrap in a way where the widest rows tend to be at the top while the shorter rows are at the bottom:

This leaves the tabs looking awkward and unbalanced. Is there a way that nav-tabs can be modified so that the rows are wider at the bottom? More like this:

Here's the JSFiddle that produced the first image.

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

解决方案

I know it's not the best solution from the performance point of view but, anyway...Hope, this will be helpful. This solution doesn't depends on specific tab width and provides the result you want.

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

这篇关于Alter Bootstrap导航标签行换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！