動態引導導航環繞菜單項

Question

我有一個Bootstrap 3.3.7頁面，沿頁面頂部有一個導航欄組件。當使用靜態數據填充時，這一切都很完美，但是當我嘗試使用基於來自服務器的某些Ajax負載的新下拉列表填充菜單時，即使存在大量水平空間，菜單行也會包裝。

我假設它是基於初始菜單設置一些固定寬度，然後無法應付動態展寬。如果我手動縮小頁面導航點摺疊的點，然後再擴展一次，那麼迴流就會發生，並且所有這些都會在一條線上結束。

有什麼辦法強制Bootstrap導航以編程方式迴流？

我需要擴大的特定元素是「.navbar-right」，如果我手動編寫代碼CSS使其在動態添加之後變得更寬，那麼這可以工作，但我寧願不將任意常量硬編碼代碼給出的菜單不是恆定的，字體可能會改變。

Answer 1

回答我自己的問題（儘管如果有人知道任何更好的替代方案，將會感激） - 這似乎工作正常。

// Perform the dynamic update 
var htmlOutput = $.render.mytemplate(params); 
$("#mynavtemplate").replaceWith(htmlOutput); 

// Measure the total width of the children of .navbar-right 
var newWidth = 0; 
$(".navbar-right").children().each(function(){ newWidth += $(this).width(); }); 

// Force .navbar-right to be at least as wide as the sum of children 
$(".navbar-right").css("min-width", newWidth);