부트 스트랩 끄기 캔버스 왼쪽 탐색 메뉴

Question

부트 스트랩을 사용하여 웹 페이지에 대한 반응 형 레이아웃을 구축하려고합니다. 나는 일반적으로 머리글로 웹 페이지를 렌더링하고 왼쪽 디스플레이는 [데스크톱 해상도]로 표시하고 싶습니다. 그러나 사이트가 태블릿이나 휴대 기기의 크기로 조정 된 경우 토글 버튼을 표시하고 싶습니다 [OffCanvas Bootstrap]. 슬라이드 애니메이션과 왼쪽 탐색 가시성 [항상 숨겨진]와 http://jsfiddle.net/BqKNV/222/

이제 나는 데 문제 : 다음은 ... 내가 지금까지 달성 한 것을

JsFiddle입니다. 감사

<section class="offcanvas-layout"> 
    <aside id="aside-menu" class="offcanvas-left nav-collapse collapse"> 
     <div id="leftcontent"> 
      <div class="inner"> 
       <div></div> 
      </div> 
      <div class="container"> 
       <!-- Brand and toggle get grouped for better mobile display --> 
       <!-- Collect the nav links, forms, and other content for toggling --> 
       <ul class="nav nav-pills nav-stacked"> 
        <li> <a href="#"><span class="glyphicon glyphicon-play"></span>United States</a> 
        </li> 
        <li> <a href="#"><span class="glyphicon glyphicon-play"></span>Canada</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.container-fluid --> 
     </div> 
    </aside> 
    <article class="offcanvas-content"> 
     <div id="header"> 
      <div class="container"> 
       <button class="btn navbar-btn" data-toggle="collapse" data-target="#aside-menu">Click Me</button> <a id="logo">Logo here</a> 

       <div class="dropdown pull-right"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 

        <ul class="dropdown-menu"> 
         <li><a href="#">Action</a> 

         </li> 
         <li><a href="#">Another action</a> 

         </li> 
         <li><a href="#">Something else here</a> 

         </li> 
         <li class="divider"></li> 
         <li><a href="#">Separated link</a> 

         </li> 
        </ul> 
       </div> 
       <div class="searchBox"> 
        <div class="input-group input-group-sm"> 
         <input id="header-search" type="text" class="form-control" placeholder="search..." /> <span class="input-group-btn"> 
        <button class="btn btn-default" type="button" id="search_Button"><span class="glyphicon glyphicon-search"></span> 

         </button> 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div id="maincontent"> 
      <div id="maincontentnav"> 
       <p>Main Content Here</p> 
      </div> 
     </div> 
    </article> 
</section> 

Answer 1

당신은이 같은 visible-xs 반응 유틸리티 클래스를 사용할 수 있습니다

...

<button class="btn navbar-btn visible-xs" data-toggle="collapse" data-target="#aside-menu">Click Me</button> <a id="logo">Logo here</a>

http://bootply.com/130279