修复BUG：超小屏时Glyphicon两列不对齐

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

@@ -35,10 +35,6 @@
         margin: 20px auto;
     }
 
-    .fb-timeliner {
-        display: none;
-    }
-
     .icon-body {
         margin-right: 0 !important;
     }

Bootstrap.Admin/Content/css/fa.css

@@ -1,4 +1,9 @@
-.modal-body #fa-top {
+body {
+    font-family: 'Open Sans', sans-serif;
+    font-size: 13px;
+}
+
+.modal-body #fa-top {
     float: left;
     margin-top: -15px;
 }

Bootstrap.Admin/Content/css/fa.responsive.css

@@ -1,4 +1,10 @@
-@media (max-width: 360px) {
+@media (max-width: 768px) {
+    .fb-timeliner {
+        display: none;
+    }
+}
+
+@media (max-width: 360px) {
     .icon-content .modal-footer span {
         display: none;
     }

Bootstrap.Admin/Scripts/Menus.js

@@ -123,7 +123,8 @@
         }
     });
 
-    $iconList.find('ul li').addClass('col-md-3 col-sm-4 col-sm-6');
+    $iconList.find('ul li').addClass('col-md-3 col-sm-4 col-xs-6');
+    $iconList.find('div').addClass('col-xs-6');
     $iconList.on('click', 'div.fa-hover a, ul li', function () {
         $pickIcon.attr('class', $(this).find('i, span:first').attr('class'));
         return false;

Bootstrap.Admin/Scripts/icon.js

@@ -1,12 +1,13 @@
 $(function () {
-    $('.fontawesome-icon-list a').click(function () {
+    var $iconList = $('#iconTab').find('div.fontawesome-icon-list');
+    $iconList.on('click', 'a', function () {
         window.console.log($(this).children('i').attr('class'));
         return false;
     });
 
-    $('.fontawesome-icon-list ul li').click(function () {
+    $iconList.on('click', 'ul li', function () {
         window.console.log($(this).children('span:first').attr('class'));
     });
-
+    $iconList.find('ul li').addClass('col-md-3 col-sm-4 col-xs-6');
-    $('.fontawesome-icon-list ul li').addClass('col-md-3 col-sm-4');
+    $iconList.find('div').addClass('col-xs-6');
 });

Bootstrap.Admin/Views/Admin/FAIcon.cshtml

@@ -4,24 +4,14 @@
 }
 @section css {
     <link href="~/Content/css/fa.css" rel="stylesheet" />
+    <link href="~/Content/css/fa.responsive.css" rel="stylesheet" />
     <link href="~/Content/css/font-awesome.css" rel="stylesheet" />
 }
 @section javascript {
     <script src="~/Scripts/icon.js"></script>
 }
 <section class="container">
-    <section>
+    <div class="panel-body" data-spy="scroll" data-target=".fb-timeliner">
-        <div class="row">
+        @Html.Partial("IconView")
-            <div class="col-lg-12">
-                <ul class="nav nav-tabs" role="tablist">
-                    <li role="presentation" class="active"><a href="#Fontawesome" data-toggle="tab">Fontawesome 图标</a></li>
-                    <li role="presentation"><a href="#Glyphicons" data-toggle="tab">Glyphicons 图标</a></li>
-                </ul>
-                <div class="tab-content">
-                    <div role="tabpanel" class="tab-pane active" id="Fontawesome">@Html.Partial("AwesomeIcon")</div>
-                    <div role="tabpanel" class="tab-pane" id="Glyphicons">@Html.Partial("Glyphicons")</div>
     </div>
-            </div>
-        </div>
-    </section>
 </section>

Bootstrap.Admin/Views/Admin/Menus.cshtml

@@ -115,6 +115,19 @@
 }
 @section customModal {
     @Html.Partial("RoleConfig")
+    <div id="dialogIcon" class="modal-content icon-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+            <h4 class="modal-title" id="myIconModalLabel">请选择图标</h4>
+        </div>
+        <div class="modal-body" data-spy="scroll" data-target=".fb-timeliner">
             @Html.Partial("IconView")
+        </div>
+        <div class="modal-footer">
+            <span>被选择的图标：</span><i id="pickIcon"></i>
+            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+            <button type="button" class="btn btn-primary" id="btnSubmitIcon">保存</button>
+        </div>
+    </div>
     @Html.Partial("MenuTree", Model.Navigations.Union(Model.Menus))
 }

Bootstrap.Admin/Views/Shared/IconView.cshtml

@@ -1,11 +1,5 @@
-<div id="dialogIcon" class="modal-content icon-content">
+<i id="fa-top"></i>
-    <div class="modal-header">
+<div class="icon-body">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-        <h4 class="modal-title" id="myIconModalLabel">请选择图标</h4>
-    </div>
-    <div class="modal-body" data-spy="scroll" data-target=".fb-timeliner">
-        <i id="fa-top"></i>
-        <div class="icon-body">
     <ul class="nav nav-tabs" role="tablist">
         <li role="presentation" class="active"><a href="#Fontawesome" data-toggle="tab">Fontawesome 图标</a></li>
         <li role="presentation"><a href="#Glyphicons" data-toggle="tab">Glyphicons 图标</a></li>
@@ -14,8 +8,8 @@
         <div role="tabpanel" class="tab-pane active" id="Fontawesome">@Html.Partial("AwesomeIcon")</div>
         <div role="tabpanel" class="tab-pane" id="Glyphicons">@Html.Partial("Glyphicons")</div>
     </div>
-        </div>
+</div>
-        <div class="fb-timeliner">
+<div class="fb-timeliner">
     <h2 class="recent-highlight">图标分类</h2>
     <ul class="nav navbar">
         <li><a href="#new">新图标</a></li>
@@ -38,12 +32,5 @@
         <li><a href="#fa-top">返回顶部</a></li>
         <li><a href="#fa-bottom">返回底部</a></li>
     </ul>
-        </div>
-        <i id="fa-bottom"></i>
-    </div>
-    <div class="modal-footer">
-        <span>被选择的图标：</span><i id="pickIcon"></i>
-        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
-        <button type="button" class="btn btn-primary" id="btnSubmitIcon">保存</button>
-    </div>
 </div>
+<i id="fa-bottom"></i>