重写侧边栏逻辑，小屏幕全屏显示菜单

Bootstrap.Admin/Bootstrap.Admin.csproj

@@ -100,6 +100,7 @@
     </Reference>
   </ItemGroup>
   <ItemGroup>
+    <Content Include="Content\css\admin-responsive.css" />
     <Content Include="Content\css\admin.css" />
     <Content Include="Content\css\blue.css" />
     <Content Include="Content\css\bootstrap-select.css" />

Bootstrap.Admin/Content/css/admin-responsive.css

@@ -0,0 +1,71 @@
+@media (min-width: 990px) {
+    .modal-dialog {
+        width: 800px;
+    }
+}
+
+@media (max-width: 768px) {
+    #sidebar {
+        display: none;
+        overflow-y: auto;
+        position: absolute;
+        width: auto;
+        padding-right: 20px;
+        z-index: 2;
+    }
+
+    #main-content {
+        margin-left: 0;
+    }
+
+    .bs-bars {
+        display: none;
+    }
+
+    .toolbar {
+        display: inline-block;
+    }
+
+    .modal-dialog {
+        width: 540px;
+    }
+
+    .fb-timeliner {
+        display: none;
+    }
+
+    .icon-body {
+        margin-right: 0 !important;
+    }
+
+    .modal-body div.checkbox {
+        min-width: 190px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .modal-body .checkbox label input[type='checkbox'] {
+        top: 4px;
+    }
+}
+
+@media (max-width: 548px) {
+    .modal-dialog {
+        width: 460px;
+    }
+}
+
+@media (max-width: 480px) {
+    .modal-dialog {
+        width: 300px;
+    }
+}
+
+@media (min-height: 700px) {
+    #sidebar {
+        padding-top: 94px;
+        height: 100%;
+        padding-bottom: 54px;
+    }
+}

Bootstrap.Admin/Content/css/admin.css

@@ -1,9 +1,4 @@
-#main-content {
+.has-error input {
-    margin-left: 210px;
-    height: auto;
-}
-
-.has-error input {
     background-repeat: no-repeat;
     background-image: url('../images/error.png');
     background-position: right 8px center;
@@ -23,16 +18,18 @@
     border-color: #3c763d;
 }
 
-.sidebar-closed > #sidebar > ul {
+
-    display: none;
+#main-content {
+    margin-left: 210px;
+    height: auto;
 }
 
 .sidebar-closed #main-content {
-    margin-left: 0px;
+    margin-left: 0;
 }
 
 .sidebar-closed #sidebar {
-    margin-left: -210px;
+    display: none !important;
 }
 
 #sidebar {

Bootstrap.Admin/Content/css/site-responsive.css

@@ -1,56 +1,7 @@
-@media (min-width: 990px) {
+@media (max-width: 930px) {
-    .modal-dialog {
+    /*#main-content {
-        width: 800px;
-    }
-}
-
-@media (max-width: 990px) {
-}
-
-@media (min-width: 768px) {
-}
-
-@media (max-width: 768px) {
-    .modal-dialog {
-        width: 540px;
-    }
-
-    .sidebar-close #sidebar {
-        height: auto;
-        overflow: hidden;
-        overflow-y: auto;
-        position: absolute;
-        z-index: 1;
-        display: block;
-        padding-bottom: inherit;
-    }
-
-    #sidebar {
-        display: none;
-    }
-
-    #main-content {
         margin: 0px !important;
-    }
+    }*/
-
-    .fb-timeliner {
-        display: none;
-    }
-
-    .icon-body {
-        margin-right: 0 !important;
-    }
-
-    .modal-body div.checkbox {
-        min-width: 190px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
-
-    .modal-body .checkbox label input[type='checkbox'] {
-        top: 4px;
-    }
 }
 
 @media (max-width: 666px) {
@@ -63,18 +14,6 @@
     .top-menu .search {
         display: none;
     }
-
-    .modal-dialog {
-        width: 460px;
-    }
-
-    .bs-bars {
-        display: none;
-    }
-
-    .toolbar {
-        display: inline-block;
-    }
 }
 
 @media (max-width: 480px) {
@@ -82,10 +21,6 @@
         display: none;
     }
 
-    .modal-dialog {
-        width: 300px;
-    }
-
     .top-menu > li {
         float: right;
     }
@@ -99,18 +34,12 @@
     }
 }
 
-@media (min-height: 600px) {
+@media (min-height: 700px) {
     html, body {
         height: 100%;
         overflow: hidden;
     }
 
-    #sidebar {
-        padding-top: 94px;
-        height: 100%;
-        padding-bottom: 54px;
-    }
-
     .header {
         position: fixed;
         top: 0;

Bootstrap.Admin/Content/js/common-scripts.js

@@ -11,27 +11,9 @@ $(function () {
         //        cookie: 'dcjq-accordion-1',
         classExpand: 'dcjq-current-parent'
     });
-    //$.slidebars();
-
-    //    sidebar toggle
-    function responsiveView() {
-        var wSize = $(window).width();
-        if (wSize <= 768) {
-            $('#container').addClass('sidebar-close');
-            $('#sidebar > ul').hide();
-        }
-
-        if (wSize > 768) {
-            $('#container').removeClass('sidebar-close');
-            $('#sidebar > ul').show();
-        }
-    }
-    $(window).on('load', responsiveView);
-    $(window).on('resize', responsiveView);
 });
 
 (function ($) {
-
     //    sidebar dropdown menu auto scrolling
     $('#sidebar .sub-menu > a').click(function () {
         var o = ($(this).offset());
@@ -43,25 +25,11 @@ $(function () {
     });
 
     $('.sidebar-toggle-box').click(function () {
-
+        if ($('#sidebar').is(":visible") === true) {
-        if ($('#sidebar > ul').is(":visible") === true) {
+            $(".sidebar").addClass("sidebar-closed");
-            $('#main-content').css({
-                'margin-left': '0px'
-            });
-            $('#sidebar').css({
-                'margin-left': '-210px'
-            });
-            $('#sidebar > ul').hide();
-            $("#container").addClass("sidebar-closed");
         } else {
-            $('#main-content').css({
+            $(".sidebar").removeClass("sidebar-closed");
-                'margin-left': '210px'
+            $("#sidebar").show();
-            });
-            $('#sidebar > ul').show();
-            $('#sidebar').css({
-                'margin-left': '0'
-            });
-            $("#container").removeClass("sidebar-closed");
         }
     });
 

Bootstrap.Admin/Views/Shared/Navigator.cshtml

@@ -1,13 +1,13 @@
 @model NavigatorBarModel
 <aside>
-    <div id="sidebar" class="nav-collapse ">
+    <div id="sidebar" class="nav-collapse">
         <!-- sidebar menu start-->
         <ul class="sidebar-menu" id="nav-accordion">
             @foreach (var menu in Model.Navigations)
             {
                 <li class="sub-menu">
                     <a href="@Url.Content(menu.Url)" class="@menu.Active"><i class="@menu.Icon"></i><span>@menu.Name</span></a>
-                    @if(menu.Menus.Count() > 0)
+                    @if (menu.Menus.Count() > 0)
                     {
                         @Html.Partial("SubNavigation", menu.Menus)
                     }

Bootstrap.Admin/Views/Shared/_Admin.cshtml

@@ -7,6 +7,7 @@
     <link href="~/Content/css/site.css" rel="stylesheet" />
     <link href="~/Content/css/admin.css" rel="stylesheet" />
     <link href="~/Content/css/site-responsive.css" rel="stylesheet" />
+    <link href="~/Content/css/admin-responsive.css" rel="stylesheet" />
     @RenderSection("css", false)
 }
 @section javascript {
@@ -18,7 +19,7 @@
     <script src="~/Content/js/framework.js"></script>
     @RenderSection("Javascript", false)
 }
-<section>
+<section class="sidebar">
     @RenderSection("header", false)
     @RenderSection("navigator", false)
     <section id="main-content">