動態引導導航包裝菜單項

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