부트 스트랩 navbar responsivness

내 탐색 막대 중앙에 로고가 있고 측면에 세 개의 메뉴 범주가 있습니다. 내 해상도를 줄이면 일부 범주가 사라지기 시작하고 navbar 붕괴 해상도가 줄어들면 정말 엉망이됩니다. 전체 축소 메뉴는 내가 가지고있는 기본 슬라이더 뒤에 표시됩니다. 이것은 제 코드입니다. 여기부트 스트랩 navbar responsivness

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="height:90px;"> 
    <div class="container-fluid"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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> 

     </div> 


     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <div class="row"> 
       <div class="col-md-4"> 
        <ul class="nav navbar-nav "> 
         <li class="active menu-item"> 
          <a class="menu-link" href="#">Home</a> 
         </li> 
         <li class="menu-item"> 
          <a class="menu-link" href="#">About us</a> 
         </li> 
         <li class="menu-item"> 
          <a class="menu-link" href="#">Events</a> 
         </li> 
        </ul> 
       </div> 
       <div class="col-md-4"> 
        <img class="img-responsive center-block" src="images/Night-club.png" title="Night-club logo" alt="Night-club logo"> 
       </div> 
       <div class="col-md-4"> 
        <ul class="nav navbar-nav ">  
         <li class="menu-item"> 
          <a class="menu-link" href="#">Gallery</a> 
         </li> 
         <li class="menu-item"> 
          <a class="menu-link" href="#">Reservation</a> 
         </li> 
         <li class="menu-item"> 
          <a class="menu-link" href="#">Contact</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 


    </div> 
</nav> 
<div class="main-slider-simple"> 
     <ul class="img-slider"> 
      <li> 
       <img class="img-responsive" src="images/main-img.jpg" title="Night club " alt="Night club " /> 
      </li> 
      <li> 
       <img class="img-responsive" src="images/main-img2.jpg" title="Night club " alt="Night club " /> 
      </li> 
      <li> 
       <img class="img-responsive" src="images/main-img3.jpg" title="Night club " alt="Night club " /> 
      </li> 
     </ul> 
     <!-- Glavni slider --> 
    </div>

그리고는

.menu-item{ 
margin-top:50px; 
margin-left:30px; 
margin-right:20px; 
font-size:30px; 
}

이 어떻게 정상 responsivness을 수행 할 수 있습니다 ... 내가 설정 한 메뉴 링크에 대한 CSS는 무엇입니까? 여기

좀 내 상황을 설명 jsfiddle입니다.

http://jsfiddle.net/cELuF/

출처

2014-05-20 Shile

가 jsfiddle 그래서 모두가 확인 –

에 무슨 일이 일어나고 있는지 볼 수 있습니다하시기 바랍니다 만들, 나는 그것을 만들었습니다. – Shile

나는 당신은 내가 CSS 상자에 추가 한 것을 볼 수있을 것이다 사업부

.col-md-4

http://jsfiddle.net/cELuF/2/

의 CSS를 변경했습니다.

출처

2014-05-20 15:03:46

부트 스트랩 navbar responsivness

답변

관련 문제