부트 스트랩 : 드롭 다운 목록 탭 축소 목록

Question

그리드 시스템을 사용하여 2 개의 열을 포함하는 트위터 부트 스트랩이있는 페이지를 만들었습니다. 왼쪽에는 스택 된 알약 목록 (클래스 .nav- 스택 사용)이 있습니다. 페이지의 너비가 768px 미만이면 내용이있는 오른쪽 열이 누적 알약 아래로 떨어지고 누적 알약이 전체 너비를 채 웁니다.

내가 필요한 것은 페이지가 768 미만일 때 누적 된 알약이 접히고 토글 버튼 (3 줄의 버튼)이 표시되는 것입니다. 이것을 어떻게 할 수 있습니까?

<div class="row"> 
    <div class="col-sm-4"> 
     <ul class="nav nav-pills nav-stacked"> 
      <li role="presentation" class="active"><a href="/link.html">Link 1</a></li> 
      <li role="presentation"><a href="/link.html">Link 2</a></li> 
      <li role="presentation"><a href="/link.html">Link 3</a></li> 
     </ul> 
    </div> 
    <div class="col-sm-8"> 
     MY CONTENT GOES HERE 
    </div> 
</div> 

고마워

Answer 1

체크 아웃 다음 CodePen (Full page view의 테스트를위한 더 나은 : 내가 클래스 또는 뭔가 빠진 것 같은이 가장 기본적인 형태의에서 나는 ㅎ,

코드를 느낀다 반응 형 기능). 그게 당신이 찾고있는거야? 후세를위한

코드 :

HTML

<div class="row"> 
    <div class="col-sm-4"> 
     <button type="button" class="btn btn-default xs-toggle" data-toggle="collapse" data-target="#pills"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <ul class="nav nav-pills nav-stacked xs-collapse" id="pills"> 
      <li role="presentation" class="active"><a href="/link.html">Link 1</a></li> 
      <li role="presentation"><a href="/link.html">Link 2</a></li> 
      <li role="presentation"><a href="/link.html">Link 3</a></li> 
     </ul> 
    </div> 
    <div class="col-sm-8"> 
     MY CONTENT GOES HERE 
    </div> 
</div> 

CSS 그래서 기본적으로이 무엇

.xs-collapse { 
    display: none; 
    visibility: hidden; 
} 

@media (min-width: 768px) { 
    .xs-toggle { 
    display: none; 
    visibility: hidden; 
    } 
    .xs-collapse { 
    display: block; 
    visibility: visible; 
    } 
} 

/* Styles for toggle button (optional) */ 

.xs-toggle .icon-bar { 
    display: block; 
    width: 22px; 
    height: 2px; 
    border-radius: 1px; 
} 

.xs-toggle .icon-bar + .icon-bar { 
    margin-top: 4px; 
} 

.btn-default.xs-toggle .icon-bar { 
    background-color: #888; 
} 

더의 메뉴 바 토글 기능에 사용되는 스타일을 재현하다 일반 형식. xs-toggle 및 xs-collapse 클래스는 화면 크기가 < 768px (기본적으로 부트 스트랩의 xs 클래스와 동일)에 적용되는 토글 기능을 나타 내기 위해 작성되었습니다. 따라서 적절한 sm, lg 등의 스타일 버전을 추가하여 반응이 빠른 폭으로 확장 할 수 있습니다. 나머지 스타일은 토글 버튼 자체를위한 것입니다. 부트 스트랩에서 navbar에 대해서만 특별한 경우입니다. 당신은 이것을 버리고 버튼을 보이게 할 수 있습니다.