动态引导导航环绕菜单项

我有一个Bootstrap 3.3.7页面，沿页面顶部有一个导航栏组件。当使用静态数据填充时，这一切都很完美，但是当我尝试使用基于来自服务器的某些Ajax负载的新下拉列表填充菜单时，即使存在大量水平空间，菜单行也会包装。动态引导导航环绕菜单项

我假设它是基于初始菜单设置一些固定宽度，然后无法应付动态展宽。如果我手动缩小页面导航点折叠的点，然后再扩展一次，那么回流就会发生，并且所有这些都会在一条线上结束。

有什么办法强制Bootstrap导航以编程方式回流？

我需要扩大的特定元素是“.navbar-right”，如果我手动编写代码CSS使其在动态添加之后变得更宽，那么这可以工作，但我宁愿不将任意常量硬编码代码给出的菜单不是恒定的，字体可能会改变。

来源

2016-08-09 solidpixel

回答我自己的问题（尽管如果有人知道任何更好的替代方案，将会感激） - 这似乎工作正常。

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

来源

2016-08-09 17:22:19 solidpixel

动态引导导航环绕菜单项

回答

相关问题