jquery - 使用 Bootstrap 的垂直菜单

Question

我已经为垂直菜单使用了 Bootstrap 插件，我的要求是当我将窗口大小缩小到移动大小或在移动设备中打开它时，我只需要显示我在垂直菜单“li”标签中使用的图像，文本应该不显示并且菜单大小减小。你能帮我吗我写的代码是

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" >
<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<section id="page">
    <!-- SIDEBAR -->

    <div id="sidebar" class="sidebar">

    <div class="sidebar-menu nav-collapse" >
    <div class="divide-20"></div>
    <!-- SIDEBAR COLLAPSE -->
    <div id="sidebar-collapse" class="sidebar-collapse">
            <i class="fa fa-bars" 
    data-icon1="fa fa-bars" 
    data-icon2="fa fa-bars" ></i>
    </div>

    <!-- /SIDEBAR COLLAPSE -->

    <!-- SIDEBAR MENU -->
        <ul>
        <li><a href=""><i class="fa fa-eye"></i> <span class="menu-text">Section1</span></a></li>
            <li><a href=""><i class="fa fa-lightbulb-o"></i> <span class="menu-text">Section2</span></a></li>
            <li><a href="><i class="fa fa-bar-chart-o"></i> <span class="menu-text">Section3</span></a></li>
            <li><a href="><i class="fa fa-bell-o"></i><span class="menu-text">Section4</span></a></li>
        <li><a href=""><i class="fa fa-info-circle"></i> <span class="menu-text">Section5</span></a></li>




    </ul>
<!-- /SIDEBAR MENU -->
</div>
    </div>
<!-- /SIDEBAR -->

Answer 1

如果您不希望某些部分不出现在 XS View 中，只需添加 hidden-xs上课:

示例:<span class="menu-text hidden-xs">Section2</span>

HTML:

  <!-- SIDEBAR MENU -->
        <ul>
        <li><a href=""><i class="fa fa-eye"></i> <span class="menu-text hidden-xs">Section1</span></a></li>
            <li><a href=""><i class="fa fa-lightbulb-o"></i> <span class="menu-text hidden-xs">Section2</span></a></li>
            <li><a href="><i class="fa fa-bar-chart-o"></i> <span class="menu-text hidden-xs">Section3</span></a></li>
            <li><a href="><i class="fa fa-bell-o"></i><span class="menu-text hidden-xs">Section4</span></a></li>
        <li><a href=""><i class="fa fa-info-circle"></i> <span class="menu-text">Section5</span></a></li>
    </ul>

这是一个最小的 bootply: http://www.bootply.com/cxeL7BWMlB

您可以在这里找到官方文档: http://getbootstrap.com/css/#responsive-utilities