컨테이너는

Question

나는

<div class="navbar navbar-inverse"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <ul class="nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

부트 스트랩 트위터를 사용하여 다음 메뉴 바 코드가 내가 제거하면 출력은 입니다 : ".navbar .container {폭에서"폭 자동 " 자동} "bootstap.css에서 출력은 이되어 예상 한 결과입니다.

https://github.com/twitter/bootstrap/issues/2093은 의도 한 기능으로 "너비 : 자동"을 표시합니다. 여기서 내가 뭘 잘못하고 있니?

Answer 1

<div class="navbar navbar-static-top navbar-inverse"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <ul class="nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

이것은

Answer 2

Bootstrap basic nav bar example을 보면 네비게이션 막대의 양쪽에 여백이 있음을 알 수 있습니다. 이것은 유체가 아닌 컨테이너의 경우 페이지가 고정 너비를 차지하고 navbar가 그 너비를 사용하기 때문입니다.

navbar를 전체 페이지로 확장하려면 class="container-fluid"을 사용해야하지만 유체 레이아웃에서는 메뉴 항목 (기본적으로)이 페이지의 왼쪽에서 흐릅니다.

코드에서 container과 container-fluid을 모두 사용하고 있으며 부트 스트랩 설명서에 따라 탐색 태그를 컨테이너에 포함시키지 말고 컨테이너에 배치해야합니다.

Answer 3

정의를 .navbar .container에서 제거하여 bootstrap.css으로 해결했습니다.

이상적인 솔루션 (일반적으로 bootstrap.css 편집)은 아니지만 모든 응답 너비를 선택기에 적용하는 것보다 훨씬 간단합니다.

Answer 4

내가 위의 문제에 대한 또 다른 해결책을 발견해야한다.

navbar div에 navbar-fixed-top 클래스를 추가하십시오.

그리고 당신의 CSS 규칙에

.navbar-fixed-top{ 
position: relative; 
} 

를 추가합니다.

이것은 워드 프레스 테마를 개발할 때 메뉴를 왼쪽으로 당기지 않고 잘 작동하도록 제한합니다.