사이드 메뉴를 스크롤 할 수 없으므로 스크롤 막대가 위로 고정됩니다.

방금 부트 스트랩 3으로 시작하여 문제가 발생했습니다. 스크롤 할 때 고정되어있는 위치에 따라 this 설명서에있는 사이드 메뉴를 갖고 싶었고 그에 따라 섹션을 강조 표시했습니다. 나는 이와 비슷한 일을 할 수 있었지만, 모바일 크기로 창 크기를 조정할 때, 사이드 메뉴는 위에있는 것이 아니라 내용이 겹칩니다. 링크를 선택하면 창의 크기를 조정할 때 사이드 메뉴가 내용 상단으로 이동합니다. 사이드 메뉴를 스크롤 할 수 없으므로 스크롤 막대가 위로 고정됩니다.

여기 범인 affix-top이라고 생각하지만 난이 고정 될 수있는 방법

<body data-spy="scroll" data-target="#myScrollspy"> 
    <!-- Page Content --> 
    <div class="container"> 

     <div class="row"> 
      <div class="col-lg-12"> 
       <h1 class="page-header">Title 
        <small>Subheading</small> 
       </h1> 
      </div> 
     </div> 

     <!-- Content Row --> 
     <div class="row"> 
      <!-- Sidebar Menu --> 
      <div class="col-md-2" id="myScrollspy"> 
       <ul class="nav nav-tabs nav-stacked affix-top" data-spy="affix" > 
        <li class="active"><a href="#section-1">Section One</a></li> 
        <li><a href="#section-2">Section Two</a></li> 
        <li><a href="#section-3">Section Three</a></li> 
        <li><a href="#section-4">Section Four</a></li> 
        <li><a href="#section-5">Section Five</a></li> 
       </ul> 
      </div> 

      <!-- Content Column --> 
      <div class="col-md-9"> 
       <h2 id="section-1">Section One</h2> 
       <h2 id="section-2">Section Two</h2> 
       <h2 id="section-3">Section Three</h2> 
       <h2 id="section-4">Section Four</h2> 
       <h2 id="section-5">Section Five</h2> 
      </div> 
     </div> 
    </div> 
</body>

유래

에 여기에 경험이있는 사람들에게 맡겨?

출처

2014-09-27 Much Overflow

찾고있는 것은 CSS 미디어 쿼리로, 색상, 높이 및 너비와 같은 미디어 기능을 기반으로 스타일 규칙을 수정할 수 있습니다. 연결된 부트 스트랩 페이지는 최소 및 최대 너비 기능을 사용하여 사이드 바의 표시 방법을 변경합니다.이 페이지는 페이지 하단의 CSS file에서 볼 수 있습니다. 관련 코드는 다음과 같습니다.

@media (min-width: 768px) { 
    /* Adjust sidenav width */ 
    .bs-docs-sidenav { 
     width: 166px; 
     margin-top: 20px; 
    } 
    .bs-docs-sidenav.affix { 
     top: 0; 
    } 
} 
@media (max-width: 767px) { 
    /* Sidenav */ 
    .bs-docs-sidenav { 
     width: auto; 
     margin-bottom: 20px; 
    } 
    .bs-docs-sidenav.affix { 
     position: static; 
     width: auto; 
     top: 0; 
    } 
}

약간 단순화했는데 시작하면 충분합니다. 최대 너비가 768px보다 작 으면 사이드 바 너비가 auto로 변경되고 접사 코드가 사이드 바를 페이지 상단에 유지합니다.

출처

2014-09-27 17:48:02 Pred

그걸 수정했습니다. 커피 한 잔 사면 좋겠어. 고마워! –

사이드 메뉴를 스크롤 할 수 없으므로 스크롤 막대가 위로 고정됩니다.

답변

관련 문제