jQuery設置列表項的寬度

Question

我使用的是Bootstrap，導航菜單元素是由用戶生成的。有些用戶可能只需要2個菜單列表項，有些用戶可能需要8個菜單列表項。

我希望能夠根據菜單中的項目數來設置菜單導航元素寬度。例如，如果有4個菜單項，那麼li寬度將被設置爲25％，如果有2個，那麼li寬度將被設置爲50％。有沒有一種jQuery可以做的方法這個？

<ul class="nav nav-pills mainNav"> 
    <li><a href="#">Home</a> </li> 
    <li><a href="#">Link 1</a> </li> 
    <li class="active"><a href="#">Link 2</a> </li> 
    <li><a href="#">Link 3</a> </li> 
    <li><a href="#">Link 4</a> </li> 
    <li><a href="#">Link 5</a> </li> 
    <li><a href="#">Link 6</a> </li> 
</ul> 

如何讓jQuery根據項目數設置寬度？

Answer 1

所以我用下面的代碼來設置LIS的基礎上，數寬度有：

$.fn.autowidth = function() { 
return this.each(function() {   
    $('li', this).css({'width' : (100/$('li', this).length) + '%'}) 
}); 
}; 
$('.mainNav').autowidth(); 

Answer 2

從記錄上來看，這是一個情況下flexbox做了了不起的工作：

.mainNav { 
    display: flex; 
    flex-direction: row; 
} 

.mainNav li { 
    flex-grow: 1; 
} 

顯然帶有瀏覽器支持等所有含義