부트 스트랩 2.3 응답 성 Navbar align-right

Question

최근에 부트 스트랩 (및 프론트 엔드 - 일반적으로)을 학습하면 특정 문제가 발생합니다. 나는 왼쪽으로 정렬 된 로고와 전체 페이지 너비에 걸쳐 비례 조정 된 navbar를 가지고 있고 오른쪽으로 떠있는 unordererd 목록의 5 개 항목을 추적합니다. 응답 성이 향상되지 않는 한 훌륭하게 작동합니다. 특정 최소/최대 너비를 입력 할 때 나타나는 일반적인 동작 - 목록 아래에있는 항목을 정렬하는 것 -은 훌륭하지만 오른쪽 플로팅이 길 아래 어딘가에서 손실됩니다 . bootstrap-responsive.css를 건너 뛰는 동안이 문제의 원인이되는 줄을 발견하는 데 어려움이 있습니다. 누구나 내가 어디에서부터 조사해야하는지 알 수 있습니까? 순서없는 목록의 인라인 스타일링 게다가

<div class="navbar"> 
    <div class="navbar-inner"> 
     <a class="brand" href="#"><img src="img/logo.png" alt="horizontal-ad"></a> 
     <ul class="nav" style="float: right;"> 
      <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li> 
      <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li> 
      <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li> 
      <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li> 
      <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li> 
     </ul> 
    </div> 
</div> 

는 유일한 규칙 I 재정은 색상을 조절하는 주요 bootstrap.css에서 .navbar - 내부입니다.

감사합니다.

:: 편집 : 방금 제거한 이후로 bootstrap-responsive.css와 아무 관련이 없다는 것을 알았지 만 동작은 동일하게 유지됩니다. 그러나 문제는 여전히 존재합니다. ::

Answer 1

HTML

<ul class="nav" id="nav_ul"> 

CSS

#nav_ul{ 
float:right!important; 
} 

Answer 2

부트 스트랩 도우미 클래스 당겨 오른쪽보십시오 :

<ul class="nav pull-right"> 

또는 블록에 표시하려고 :

<ul style="display:block" class="nav pull-right"> 

,691 화면이 너무 작은 얻는 경우가 사라집니다하지만 또한

float: right!important; 
clear: right; 
text-align: right; 

가 같은 줄에 그것을 kepp 너무 사용하는 모바일 장치에서 잘 작동하지 않습니다 :

Answer 3

이

<div class="navbar"> 
    <div class="navbar-inner clearfix"> 
     <a class="brand pull-left" href="#"><img src="img/logo.png" alt="horizontal-ad"></a> 
     <ul class="nav pull-right"> 
      <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li> 
      <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li> 
      <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li> 
      <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li> 
      <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li> 
     </ul> 
    </div> 
</div> 

Answer 4

사용하려고 시도 CSS는이 라인 :

white-space: nowrap; 

http://jsfiddle.net/hive7/b9cgn/4