내 Navbar가 가로로 정렬되지 않습니다

Question

현재 첫 번째 클라이언트의 웹 사이트를 만들 때 Bootstrap 3을 사용하고 있지만 navbar가 올바르게 정렬되지 않습니다. 내가 col-sm 중단 점을 때 인라인 표시 중지합니다. 나는 다른 많은 기사를 훑어보고 많은 다른 CSS 속성을 적용했지만 아무 소용이 없다. 이 시점에서 내 코드에는 버그가있을 수 있지만 확실하지는 않습니다. 이것은 내 첫 번째 실제 프로젝트이므로, 나는 기술적으로 초보자입니다. (내 끔찍한 코드를 용서하십시오 : P). 제가 빠진 것이 있으면 알려주세요. 여기 스크린 샷과 코드가 있습니다. 여기

<nav class="navbar navbar-default navbar-fixed-top" id="navbar"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand " href="index.html">Spa&bull;ology</a> 
     </div> <!-- /.navbar-header --> 
     <!--NAV LINKS--> 
     <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
      <ul class="nav navbar-nav "> 
       <!--LINKS--> 
       <li><a href="index.html">Home</a></li> 
       <!--DROPDOWN LINKS--> 
       <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="waxingandsugaring.html">Waxing &amp; Sugaring</a></li> 
         <li><a href="manisandpedis.html">Manis &amp; Pedis</a></li> 
         <li><a href="spraytanning.html">Spray Tanning</a></li> 
         <li><a href="massages.html">Massages</a></li> 
         <li><a href="lashes.html">Lash Extensions</a></li> 
         <li><a href="facialsandpeels.html">Facials &amp; Peels</a></li> 
        </ul><!-- /.dropdwon-menu --> 
       </li> 
       <!-- /.dropdown --> 
       <li><a href="#">Products</a></li> 
       <li><a href="#">Contact Us</a></li> 
       <li><a href="http://www.secure-booker.com/spaology/ShopOnline/GiftCertificate.aspx" target="_blank">Gift Certificates</a></li> 
       <li><a href="http://www.secure-booker.com/spaology/MakeAppointment/" target="_blank">Book Online</a></li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
    </div><!-- /.container --> 
</nav> 

내가 시도하는 CSS 속성 중 일부입니다. 나는 이러한 속성의 다른 조합을 사용하지 않았다.

.navbar .navbar-nav > li { 
float:left;  
} 

.navbar .navbar-nav > li { 
display:inline;  
} 

.navbar .navbar-nav > li { 
display:block; 
float:left; 
vertical-align: top 
} 

Answer 1

을 시도, 그것은 구체적인 조언을 제공하기 어렵다. 그러나 부트 스트랩 탐색 메뉴는 사용자가 지정한 중단 점에서 숨김으로 전환되도록 코드화되어 있으며 메뉴 항목 자체는 수직으로 쌓입니다.

여기에서 직접 볼 수 있습니다 위해 http://getbootstrap.com/components/#navbar-fixed-top

은 메뉴가 보이지 유지해야하고 항목합니다 (<li> 요소)을 조정하거나 그 중단에 대한 CSS를 오버라이드 (override) 할 필요가 인라인 남아있다.

Answer 2

귀하의 CSS를 살펴보면 디스플레이 및 플로팅을 2 번 정의했습니다. 중복 항목을 제거하고

.navbar .navbar-nav > li { 
display:inline; 
position:relative; 
display:block; 
float:left; 
vertical-align: top; 
} 

을 필요에 따라 수정 관련 CSS의 전부를 보지 않고이 https://jsfiddle.net/4k1yoctf/2/

Answer 3

귀하의 의견을 들어 주셔서 감사합니다. 너 모두 메달받을 자격이있어! navbar 요소의 크기 (너비)를 줄임으로써이 문제를 해결했습니다. 일부 픽셀 조작으로 모든 탐색 표시 줄 항목을 한 줄에 맞출 수있었습니다. 다음은이 문제를 해결하는 데 사용한 CSS의 예입니다. 희망이 사람을 미래에 도움이됩니다.

.navbar .navbar-header > a { 
font-size: 1.4em; 
width: 40px; 
padding-left: 0px; 

} 처음으로 더 명확 존재하지 않는