navbar collapsing을위한 CSS 수정

많은 사람들이 알고 있지만 Bootstrap에 익숙하지 않은 문제가 있다는 것을 알고 있습니다. 내 navbar가 768px 이하로 축소되는 것을 방지하기위한 모든 CSS 솔루션을 찾고 있습니다.navbar collapsing을위한 CSS 수정

<!-- Fixed navbar --> 
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container-fluid header-top"> 
     <ul class="navbar-nav navbar-left list-inline contact-links"> 
      <li><a href="tel:180042762687"><span class="glyphicon glyphicon-earphone"></span></a></li> 
      <li><a href='****live chat**'><span class="glyphicon glyphicon-comment"></span></a></li> 
      <li><a href="mailto:***@***"><span class="glyphicon glyphicon-envelope"></span></a></li> 
      </ul> 

     <ul class="navbar-nav navbar-right list-inline account-and-cart-links"> 
     <li><a href="my-account.html"><span class="glyphicon glyphicon-user"></span></a></li> 
     <li><a href="my-cart.html"><span class="glyphicon glyphicon-shopping-cart"></span></a></li> 
     </ul> 

    </div> 

</div>

출처

2014-04-25 blisstdev

나는 (당신이 바이올린이나 스크린 샷을 게시 할 수없는 경우) 모바일 형 탐색 모음으로 전환 의미 붕괴에 의해 같은데요? CSS 미디어 쿼리 768px에서'.navbar' 관련 항목을 모두 제거해야합니다. – evan

http://jsfiddle.net/blisstdev/U5h32/1/ 전체 화면으로보고 화면을 축소하면 http://getbootstrap.com/components/에서 제안한대로 상단 막대가 갑자기 두 줄로 표시됩니다. #navbar,하지만 실제로 솔루션을 사용하여 문제를 해결하는 방법을 알아낼 수는 없습니다. – blisstdev

<ul>에 pull-left 및 pull-right을 추가하십시오.

JSFiddle

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container-fluid header-top"> 
     <ul class="navbar-nav navbar-left pull-left list-inline contact-links"> 
      <li><a href="tel:180042762687"><span class="glyphicon glyphicon-earphone"> 
       </span></a></li> 
      <li><a href='****live chat**'><span class="glyphicon glyphicon-comment"></span></a></li> 
      <li><a href="mailto:***@***"><span class="glyphicon glyphicon-envelope"></span></a></li> 
     </ul> 

     <ul class="navbar-nav navbar-right pull-right list-inline account-and-cart-links"> 
      <li><a href="my-account.html"> 
       <span class="glyphicon glyphicon-user"></span></a></li> 
      <li><a href="my-cart.html"> 
       <span class="glyphicon glyphicon-shopping-cart"></span></a></li> 
     </ul> 
    </div> 
</div>

출처

2014-04-25 02:10:12 evan

당신이 최고입니다! 너무 감사합니다! 나는 pull-left/right가 더 이상 사용되지 않았다고 생각했지만 드롭 다운 메뉴에서만 사용되었다. – blisstdev

굉장하고, 기뻤습니다. upvote도 잊지 마세요 :) – evan

navbar collapsing을위한 CSS 수정

답변

관련 문제