부트 스트랩 SImple 사이드 바 - 겹침 부분 아래 내용

Question

사이드 바 템플릿 (https://startbootstrap.com/template-overviews/simple-sidebar/)을 사용하고 있는데 사이드 바 아래의 내용과 사이드 바 오른쪽의 내용이 필요합니다. 그것은 잘 작동하지만 창 크기를 조정할 때 아래 내용이 겹쳐서 맨 위로 이동합니다.

<div id="wrapper"> 

    <!-- Sidebar --> 
    <div id="sidebar-wrapper"> 
     <ul class="sidebar-nav"> 
      <li class="sidebar-brand"> 
       <a href="#"> 
        Start Bootstrap 
       </a> 
      </li> 
     </ul> 
    </div> 
    <!-- /#sidebar-wrapper --> 

    <!-- Page Content --> 
    <div id="page-content-wrapper"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <h1>Simple Sidebar</h1> 
        <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> 
        <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p> 
        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- /#page-content-wrapper --> 

</div> 

<!-- /#wrapper --> 
<div id="content-below"> 

</div> 

내가 크기를 조정 한 후 상단에 모든 방법을가는 것을 방지하기 위해 "내용은 아래의"컨테이너를 배치해야합니다 :

나는 이런 식으로 뭔가있어?

Answer 1

은 CSS에서 다음 섹션을 주석 :

#page-content-wrapper { 
    width: 100%; 
    /* position: absolute; */ 
    padding: 15px; 
} 

여기 codepen

예를 즐길 수 .. :)