重构样式表增加site-responsive样式，修复sidebar不通分辨率下自动隐藏功能

Bootstrap.Admin/Bootstrap.Admin.csproj

@@ -112,6 +112,7 @@
     <Content Include="Content\css\bootstrap.css" />
     <Content Include="Content\css\bootstrap.min.css" />
     <Content Include="Content\css\font-awesome.min.css" />
+    <Content Include="Content\css\site-responsive.css" />
     <Content Include="Content\fonts\fontawesome-webfont.svg" />
     <Content Include="Content\images\arrow-up.png" />
     <Content Include="Content\images\avatar1_small.jpg" />

Bootstrap.Admin/Content/css/admin.css

@@ -1,11 +1,27 @@
-#sidebar {
+.wrapper {
+    display: inline-block;
+    padding: 15px;
+    width: 100%;
+}
+
+.sidebar-closed > #sidebar > ul {
+    display: none;
+}
+
+.sidebar-closed #main-content {
+    margin-left: 0px;
+}
+
+.sidebar-closed #sidebar {
+    margin-left: -210px;
+}
+
+#sidebar {
     width: 210px;
-    position: absolute;
+    height: 100%;
-    top: 0;
+    position: fixed;
-    bottom: 40px;
     background: #2a3542;
     overflow-y: scroll;
-    outline: none;
     margin-top: 94px;
 }
 
@@ -131,7 +147,3 @@ ul.sidebar-menu {
                     transition: all 0.3s ease;
                     color: #aeb2b7;
                 }
-
-.row {
-    margin-left: 210px;
-}

Bootstrap.Admin/Content/css/fix.css

@@ -3,14 +3,14 @@
     overflow: hidden;
 }
 
-.row {
+#main-content {
+    margin-left: 210px;
     position: fixed;
-    overflow: auto;
-    top: 0;
     left: 0;
-    right: 0;
     bottom: 40px;
-    padding-top: 16px;
+    right: 0;
+    top: 94px;
+    overflow: auto;
 }
 
 .site-footer {

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

@@ -0,0 +1,62 @@
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+    /* Safari and Chrome */
+    .dropdown-menu.extended {
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.176) !important;
+    }
+}
+
+@media (min-width: 980px) {
+    .modal-dialog {
+        width: 800px;
+    }
+}
+
+@media (max-width: 979px) {
+    .panel-body {
+        padding-top: 0px;
+    }
+
+        .panel-body .form-inline .form-group {
+            margin-top: 15px;
+            margin-bottom: 0;
+        }
+}
+
+@media (max-width: 768px) {
+    .sidebar-close #sidebar {
+        height: auto;
+        overflow: hidden;
+        overflow-y: auto;
+        position: absolute;
+        z-index: 1001;
+        display: block;
+    }
+
+    #sidebar {
+        display: none;
+    }
+
+    #main-content {
+        margin: 0px !important;
+        position: none !important;
+    }
+
+    .top-nav {
+        position: absolute;
+        right: 10px;
+        top: 0px;
+    }
+}
+
+@media (max-width: 480px) {
+    .top-nav ul.top-menu > li {
+        float: right;
+    }
+
+    .top-nav .search {
+        display: none;
+    }
+}
+
+@media (max-width:320px) {
+}

Bootstrap.Admin/Content/css/site.css

@@ -35,12 +35,6 @@ div button span {
     margin-top: 108px;
 }
 
-.row {
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 92px;
-}
-
 .header, .footer {
     min-height: 60px;
     padding: 0 15px;
@@ -308,13 +302,6 @@ a.logo {
                 display: block;
             }
 
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-    /* Safari and Chrome */
-    .dropdown-menu.extended {
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.176) !important;
-    }
-}
-
 /*Login*/
 .form-signin {
     width: 330px;
@@ -387,41 +374,18 @@ a.logo {
 
 /*end login*/
 
-/*bootstrap table 下边距*/
-.table-body {
-    padding: 0px 8px;
-}
-
 .form-inline .form-group label.control-label {
     margin-right: 10px;
-}
+    width: 80px;
-
+    text-overflow: ellipsis;
-@media (min-width: 768px) {
+    white-space: nowrap;
-    .form-inline .form-group {
+    overflow: hidden;
-        margin-bottom: 15px;
-    }
-
-    .panel-body {
-        padding-bottom: 0;
-    }
-}
-
-@media (max-width: 768px) {
-    .panel-body {
-        padding-bottom: 0;
-    }
 }
 
 .modal-body {
     padding-bottom: 0;
 }
 
-@media (min-width: 992px) {
-    .modal-dialog {
-        width: 800px;
-    }
-}
-
 .modal-header {
     background-color: #f5f5f5;
     border-top-left-radius: 6px;

Bootstrap.Admin/Views/Shared/_Admin.cshtml

@@ -7,6 +7,7 @@
     <link href="~/Content/css/bootstrap-table.css" rel="stylesheet" />
     <link href="~/Content/css/sweetalert.css" rel="stylesheet" />
     <link href="~/Content/css/site.css" rel="stylesheet" />
+    <link href="~/Content/css/site-responsive.css" rel="stylesheet" />
     <link href="~/Content/css/fix.css" rel="stylesheet" />
     <link href="~/Content/css/admin.css" rel="stylesheet" />
     @RenderSection("css", false)
@@ -19,15 +20,17 @@
     <script src="~/Content/js/framework.js"></script>
     @RenderSection("Javascript", false)
 }
-@RenderSection("header", false)
-@RenderSection("navigator", false)
 <section id="container">
-    <section>
+    @RenderSection("header", false)
-        <div id="main-content" class="row">
+    @RenderSection("navigator", false)
-            <div class="col-lg-12">
+    <section id="main-content">
-                @RenderBody()
+        <section class="wrapper">
+            <div class="row">
+                <div class="col-lg-12">
+                    @RenderBody()
+                </div>
             </div>
-        </div>
+        </section>
     </section>
 
     <!--footer start-->

Bootstrap.Admin/Views/Shared/_Default.cshtml

@@ -60,7 +60,7 @@
     <div class="panel-heading">
         查询结果
     </div>
-    <div class="panel-body table-body">
+    <div class="panel-body">
         <table></table>
     </div>
 </div>