Javascript 如何进一步扩展切换边栏

我使用下面的HTML+CSS作为asp.net网页上的边栏。我从模板上得到的。目前，当我切换侧边栏时，它显示出混乱。文本和图标不在同一行中。我想空间不够了。如何更改它，使其在切换时打开得更多？非常感谢。我对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>

JS:

---

您只需要对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;
    }
}

---

我可以正确地看到图标，但当我切换侧栏时，侧栏中看不到相应的选项卡名称。@sparta93在小提琴中，或者您是否更新了代码？什么浏览器？如果我将小提琴中的输出窗口调整为非常小，它将与您的代码一起工作。如果我使输出窗口变大，它将不工作。我用的是chrome。我更新的代码也有同样的问题。@sparta93刚刚更新了小提琴，更改了

#wrapper.active#边栏wrapper{left:66px；}

。现在工作吗？非常感谢你。这很有效。然而，其他一些东西停止了工作。。。打开侧边栏时，

内侧边栏右侧的内容未正确调整大小。理想情况下，它将调整大小并填充右侧的空间。此时，侧边栏会切断内容区域的左侧部分。

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

#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;
    }
}