动态引导程序导航包装菜单项

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