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视图中，只需在其上添加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

使用Bootstrap的垂直菜单

1 个答案: