如何扩展切换边栏更多

Question

我在asp.net网页上使用以下HTML + CSS作为边栏。我从模板中得到了这个。目前，当我切换边栏时，它出现了混乱。文字和图标不在同一行。我认为它的空间不足。我如何改变它，以便在切换时打开更多？谢谢。我对CSS和bootstrap非常陌生。谢谢。

<div id="wrapper">  
     <!-- Sidebar --> 
      <!-- Sidebar --> 
     <div id="sidebar-wrapper"> 
     <ul class="sidebar-nav" id="sidebar">  
      <li class="sidebar-brand"><a id="menu-toggle" href="#">Menu<span id="main_icon" class="glyphicon glyphicon-align-justify"></span></a></li> 
      <li><a>Dashboard<span class="sub_icon glyphicon glyphicon-dashboard"></span></a></li> 
      <li><a>Reports<span class="sub_icon glyphicon glyphicon-link"></span></a></li> 
      <li><a>Configuration<span class="sub_icon glyphicon glyphicon-link"></span></a></li> 
      <li><a>Settings<span class="sub_icon glyphicon glyphicon-link"></span></a></li> 
     </ul> 
     </div> 

     <!-- Page content --> 
     <div id="page-content-wrapper"> 
     <div class="page-content inset"> 
      <div class="row"> 
        <div> 
         <asp:ContentPlaceHolder ID="body" runat="server"> 
         </asp:ContentPlaceHolder> 
        </div> 

      </div> 
      </div> 
     </div> 
     </div> 

CSS：

.row{ 
    margin-left:0px; 
    margin-right:0px; 
} 

#wrapper { 
    padding-left: 70px; 
    transition: all .4s ease 0s; 
    height: 100% 
} 

#sidebar-wrapper { 
    margin-left: -150px; 
    left: 70px; 
    width: 150px; 
    background: #222; 
    position: fixed; 
    height: 100%; 
    z-index: 10000; 
    transition: all .4s ease 0s; 
} 

.sidebar-nav { 
    display: block; 
    float: left; 
    width: 150px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#page-content-wrapper { 
    padding-left: 0; 
    margin-left: 0; 
    width: 100%; 
    height: auto; 
} 
#wrapper.active { 
    padding-left: 150px; 
} 
#wrapper.active #sidebar-wrapper { 
    left: 150px; 
} 

#page-content-wrapper { 
    width: 100%; 
} 

#sidebar_menu li a, .sidebar-nav li a { 
    color: #999; 
    display: block; 
    float: left; 
    text-decoration: none; 
    width: 150px; 
    background: #252525; 
    border-top: 1px solid #373737; 
    border-bottom: 1px solid #1A1A1A; 
    -webkit-transition: background .5s; 
    -moz-transition: background .5s; 
    -o-transition: background .5s; 
    -ms-transition: background .5s; 
    transition: background .5s; 
} 
.sidebar_name { 
    padding-top: 25px; 
    color: #fff; 
    opacity: .7; 
} 

.sidebar-nav li { 
    line-height: 40px; 
    text-indent: 20px; 
} 

.sidebar-nav li a { 
    color: #999999; 
    display: block; 
    text-decoration: none; 
} 

.sidebar-nav li a:hover { 
    color: #fff; 
    background: rgba(255,255,255,0.2); 
    text-decoration: none; 
} 

.sidebar-nav li a:active, 
.sidebar-nav li a:focus { 
    text-decoration: none; 
} 

.sidebar-nav > .sidebar-brand { 
    height: 65px; 
    line-height: 60px; 
    font-size: 18px; 
} 

.sidebar-nav > .sidebar-brand a { 
    color: #999999; 
} 

.sidebar-nav > .sidebar-brand a:hover { 
    color: #fff; 
    background: none; 
} 

.sidebar-bottom { 
    position: absolute; 
    bottom: 0; 
} 

#main_icon 
{ 
    float:right; 
    padding-right: 30px; 
    padding-top:20px; 
} 
.sub_icon 
{ 
    float:right; 
    padding-right: 32px; 
    padding-top:10px; 
} 
.content-header { 
    height: 65px; 
    line-height: 65px; 
} 

.content-header h1 { 
    margin: 0; 
    margin-left: 20px; 
    line-height: 65px; 
    display: inline-block; 
} 

@media (max-width:767px) { 
    #wrapper { 
    padding-left: 70px; 
    transition: all .4s ease 0s; 
} 
#sidebar-wrapper { 
    left: 70px; 
} 
#wrapper.active { 
    padding-left: 150px; 
} 
#wrapper.active #sidebar-wrapper { 
    left: 150px; 
    width: 150px; 
    transition: all .4s ease 0s; 
} 
} 



    .glyphicon{ 
     font-size: 19px; 
    } 
} 

JS：

$("#menu-toggle").click(function (e) { 
       e.preventDefault(); 
       $("#wrapper").toggleClass("active"); 
      }); 

Answer 1

你只需要进行一些更新的CSS，使其更广泛。这些是我所做的更改的选择器。您可以在下面的小提琴中看到工作版本。

#sidebar-wrapper { 
    margin-left: -242px; 
    left: 70px; 
    width: 250px; 
    background: #222; 
    position: fixed; 
    height: 100%; 
    z-index: 10000; 
    transition: all .4s ease 0s; 
} 

#wrapper.active #sidebar-wrapper { 
    left: 66px; 
} 

.sidebar-nav { 
    display: block; 
    float: left; 
    width: 250px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

@media (max-width:767px) { 
    #wrapper { 
     padding-left: 70px; 
     transition: all .4s ease 0s; 
    } 
    #sidebar-wrapper { 
     left: 70px; 
    } 
    #wrapper.active { 
     padding-left: 150px; 
    } 
    #wrapper.active #sidebar-wrapper { 
     left: 242px; 
     /*width: 150px; You can remove this */ 
     transition: all .4s ease 0s; 
    } 
} 

Check out this Fiddle