동적 부트 스트랩 탐색 포장 메뉴 항목

Question

페이지 위쪽에 Navbar 구성 요소가있는 부트 스트랩 3.3.7 페이지가 있습니다. 정적 데이터로 채워지는 경우 모두 완벽하게 작동하지만, 서버에서 일부 아약스로드를 기반으로 새 드롭 다운 목록을 메뉴에 채우려는 경우 메뉴 선은 가로 공간이 많이 있어도 줄 바꿈됩니다.

초기 메뉴를 기준으로 고정 너비를 설정 한 다음 동적 확장에 대처하지 못했다고 가정합니다. 수동으로 페이지를 좁히면 nav이 축소되고 다시 넓혀지면 리플 로우가 멈추고 모든 것이 한 줄로 돌아갑니다.

프로그래밍 방식으로 부트 스트랩 탐색을 강제로 수행 할 수 있습니까?

더 넓게 만들 필요가있는 특정 요소는 ".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);