접히는 사이드 바 부트 스트랩

Question

부트 스트랩을 처음 사용하고 그리드 시스템이 어떻게 작동하는지 이해하는 데 약간의 문제가 있습니다. 다음 CSS를

<div class="row"> 
    <div class="sidebar col-xs-3"> 
     <div class="well"> 
     <ul class="sidebar-nav"> 
       <li class="sidebar-brand"> 
        <a href="#"> 
         Navigation 
        </a> 
       </li> 
       <li> 
        <a href="#">Item 1</a> 
       </li> 
       <li> 
        <a href="#">Item 2</a> 
       </li> 
       <li> 
        <a href="#">Item 3</a> 
       </li> 
       <li> 
        <a href="#">Item 4</a> 
       </li> 
       <li> 
        <a href="#">Item 5</a> 
       </li> 
       <li> 
        <a href="#">Item 6</a> 
       </li> 
       <li> 
        <a href="#">Item 7</a> 
       </li> 
      </ul> 

     </div> 
    </div> 
    <div class= "main col-xs-9"> 
     <div class="well">body</div> 
    </div> 

    </div> 

:

/* Sidebar Styles */ 
.sidebar-nav { 
    top: 0; 
    width: 250px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

.sidebar-nav li { 
    text-indent: 20px; 
    line-height: 40px; 
} 

.sidebar-nav li a { 
    display: block; 
    text-decoration: none; 
    color: #999999; 
} 

.sidebar-nav li a:hover { 
    text-decoration: none; 
    color: #000; 
    background: rgba(255,255,255,0.2); 
} 

.sidebar-nav li a:active, 
.sidebar-nav li a:focus { 
    text-decoration: none; 
} 

.sidebar-nav > .sidebar-brand { 
    height: 65px; 
    font-size: 18px; 
    line-height: 60px; 
} 

.sidebar-nav > .sidebar-brand a { 
    color: #999999; 
} 

.sidebar-nav > .sidebar-brand a:hover { 
    color: #000; 
    background: none; 
} 

그것은 작은 화면 크기에 다음과 같은 문제가 동안 큰 화면에서 잘 작동 처음에, 나는 사이드 바 페이지에 대한 다음과 같은 코드가 있습니다 :

사이드 바 텍스트가 사이드 바 영역의 크기를 조정하지 않는 이유에 대한 설명을 보내 주시면 감사하겠습니다. 도움 주셔서 감사합니다.

Answer 1

문제는 사이드 바 및 신체

<div class="sidebar col-md-3 col-xs-6"> 

</div> 
<div class= "main col-md-9 col-xs-6"> 
    <div class="well">body</div> 
</div> 

에 대해 서로 다른 클래스를 사용하여 해결되었습니다