Боковая панель ботстрапа, которая не отображается в верхней части

Question

Я использую этот bootsrtap template на своем веб-сайте, но боковая панель не начинается с начала, заражая ее, показывая некоторое расстояние вниз, однако содержимое идеально.

<div class="container-fluid" style="margin-top:80px; min-height:500px; background-color:orange;"> 
    <div class="row"> 

    <div id="wrapper"> 

     <!-- Sidebar --> 
     <div id="sidebar-wrapper"> 
      <ul class="sidebar-nav"> 
       <li class="sidebar-brand"> 
        <a href="#"> 
         Admin Panel 
        </a> 
       </li> 
       <li> 
        <a href="email_master_list/">Email Master List</a> 
       </li> 
       <li> 
        <a href="#">Shortcuts</a> 
       </li> 
       <li> 
        <a href="#">Overview</a> 
       </li> 
       <li> 
        <a href="#">Events</a> 
       </li> 
       <li> 
        <a href="#">About</a> 
       </li> 
       <li> 
        <a href="#">Services</a> 
       </li> 
       <li> 
        <a href="#">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /#sidebar-wrapper --> 

     <!-- Page Content --> 
     <div id="page-content-wrapper" style="background-color:green;"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         {% block contentarea %} 
         <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> 
         {% endblock %} 
        </div> 
       </div> 
     e.preventDefault(); 
     $("#wrapper").toggleClass("toggled"); 
    }); 
    </script> 
</div>   </div> 
     </div> 
     <!-- /#page-content-wrapper --> 

    </div> 
    <!-- /#wrapper --> 
</script> 
</div> 
    </div> 
    <script> 
    $("#menu-toggle").click(function(e) { 
     e.preventDefault(); 
     $("#wrapper").toggleClass("toggled"); 
    }); 
    </script> 
</div> 

Я хочу черную боковую панель для начала сверху, однако на экране мобильного телефона он показывает сверху.

Answer 1

Вы можете расположить # боковой панели-оболочки на верхней

#sidebar-wrapper{ 
    top:0px; 
} 

Demo: http://jsfiddle.net/bronni/caprkok4/2/

Answer 2

U дал сам запас верхом ур контейнер: 80px так очевидно, боковая панель будет начинаться с вниз, хотя в вычисленном он покажет margin-top: 0, но если вы проверите контейнер, у него есть margin-top: 80px;