부트 스트랩 3 메뉴

축소를 나는 최근에 내가 무너 탐색을 구축 부트 스트랩의 최신 버전 ... 을 다운로드하고 그것을 의도 무엇 않지만. 모든 데모에서 nav가 아래로 튀어 오릅니다. Ive는 예제를 다운로드했으며 메뉴가 숨겨진 후에 작동하지 않습니다. Ive가 해결책을 찾았습니다. 어떤 도움도 으로 크게 평가 될 것입니다. 작성된 코드를 포함 임 ..부트 스트랩 3 메뉴

CSS

/*nav styles*/ 
.navbar{ 
    background:none; 
} 
.nav{ 
    margin-top:77px; 
    margin-right:5%; 
} 

.navbar .brand { 
    max-height: 40px; 
    overflow: visible; 
    padding-top: 0; 
    padding-bottom: 0; 
} 
.navbar .nav li{ 
    padding-left: 5px; 
    font-weight: bold; 
    text-transform: uppercase; 
} 
.navbar .nav li a{ 
    background-color: #00AFE7; 
    color: #000; 
    -webkit-transition:background 1s ease; 
-moz-transition:background 1s ease; 
-o-transition:background 1s ease; 
transition:background 1s ease; 
} 

.navbar .nav li a:focus, 
.navbar .nav li a:hover { 
    color: #FFF; 
    text-decoration: none; 
    background-color: #000; 
    -webkit-transition:background 1s ease; 
-moz-transition:background 1s ease; 
-o-transition:background 1s ease; 
transition:background 1s ease; 
}

HTML

<body> 
    <div class="navbar"> 
     <div class="container"> 
      <div class="navbar-inner"> 
       <button type="btn btn-navbar" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 

       </button> <a class="brand" href="#"><img class="pull-left "src="img/logo.png" /></a> 

       <!--<a class="navbar-brand pull-left" href="#"><img class="pull-left "src="img/logo.png" /></a>--> 
       <div class="nav-collapse collapse"> 
        <ul class="nav nav-pills pull-right "> 
         <li class="active"><a href="#">Home</a> 
         </li> 
         <li><a href="#">Bikes</a> 
         </li> 
         <li><a href="#">About</a> 
         </li> 
         <li><a href="#">Store</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- Main component for a primary marketing message or call to action --> 
    <div class="jumbotron"> 
     <h1>Navbar example</h1> 

     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
     <p> <a class="btn btn-large btn-primary" href="../../docs/#navbar">View navbar docs »</a> 

     </p> 
    </div> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="js/bootstrap.js"></script> 
</body>

출처

2013-08-04 Clutch _

행운을 빌어 요 ... –

는 질문을 다시 알리는 시도하십시오. 드롭 다운을 원하는 것처럼 들립니다. 좁은 창/모바일에서 부트 스트랩 변경 Collapseing 폼이 변경됩니다. – ocodo

난 당신이 부트 스트랩 2 부트 스트랩 3 코드를 혼합하는 의심.

에 체크를 아웃 :
Live view
Edit view

나는 당신의 정확한 HTML과 CSS를 가지고 있지만, 실제로 이중 부트 스트랩 3, 사용하고자하는 경우 부트 스트랩이 CSS와 JS

을 사용했습니다 올바른 CSS 및 JS 파일이 있는지 확인하고 탐색 바에 대한 HTML이 변경된 것을 볼 수 있습니다.

http://getbootstrap.com/components/#navbar

http://getbootstrap.com/components/#navbar

내가 머리에 난 내가 필요한 모든 구성 요소가 가정 메신저 그래서뿐만 아니라 부트 스트랩 CSS를 추가 한 것을 왼쪽

출처

2013-08-24 18:18:49

부트 스트랩 3 메뉴

답변

관련 문제