부트 스트랩 메뉴 너비를 요소의 전체 너비와 같은 너비로 만들려면 어떻게해야합니까?

Question

부트 스트랩 메뉴를 사용하여 다음 코드를 가지고 있지만 원하는대로 메뉴 작업을 수행 할 수 없습니다.

<header class="navbar center-navbar"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-th-list"></span> 
     </a> 
     <div class="nav-collapse collapse nav-collapse-margin"> 
     <ul class="nav"> 
      <li><a href="Default.aspx">Home</a></li> 
      <li><a href="About.aspx">About</a></li>       
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
       Content 
       <b class="caret"></b> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="Content1.aspx">Content 1</a></li> 
       <li><a href="Content2.aspx">Content 2</a></li> 
      </ul> 
      </li> 
      <li><a href="More.aspx">More</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</header> 

센터 - 네비게이션 바 본다 코드와

.center-navbar 
{ 
    width: 80%; 
    margin: 0 auto; 
} 

같은 나는 중심의 메뉴 바를 얻을 수 있지만, 메뉴 아이템은 왼쪽으로 모두와에 비어있는 메뉴 모음의 많은 부분이 위 권리. 메뉴를 중앙에 배치하고 menuitem을 포함하는 데 필요한만큼 넓게하고 싶습니다. 정보 - - 콘텐츠 -

그것은 (그러나 페이지를 중심으로) < --Home 지금과 같은 더 ------------>

나는이 원하는 여전히 페이지 중앙에 위치합니다. < - 홈 - 정보 - 내용 - 기타 ->

부트 스트랩 CSS에서 피들을 치고 싶지는 않지만 자신 만의 CSS를 만드는 것이 좋습니다. 정의.

난 그냥 당신이 여기

을 원하는 일을하는 데 사용할 수있는 저 작은 예를 수행

Answer 1

링크입니다 : JS 코드를 다음 http://jsfiddle.net/t68nz/1/

CSS

.center-navbar 
{ 
    width: 80%; 
    margin: 0 auto; 
} 

.nav li { 
    width: 25%; 
    float:left; 
} 

.dropdown-menu li { 
    min-width:200px; 
} 

one-item{ 
width: 100%; 
} 

two-item{ 
width: 50%; 
} 

three-item{ 
width: 33.33%; 
} 

for-item{ 
width: 25%; 
} 

, 당신은했다 모든 li 항목에 직접 클래스 적용