Вертикальное меню с использованием Bootstrap

Я использовал бутстрап-плагин для вертикального меню, мое требование - когда я уменьшаю размер окна до размера мобильного телефона или открываю его на мобильном устройстве, мне нужно отображать только изображения, которые я использовал в вертикальном меню «li» tag и текст не должен отображаться и размер меню reduced.Can вы помочь мне с этим кодом, который я написал,Вертикальное меню с использованием Bootstrap

<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 -->

источник

2014-09-12 Rakhi

Если вы не хотите какую-то часть, чтобы надеть 't появляется в представлении XS, просто добавьте класс hidden-xs:

Exemple: <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

источник

2014-09-12 12:02:27 pbenard

Поблагодарите u.Для справки, но когда я присоединяю этот класс hidden-xs, он отображает текст в одной строке и изображении в другой строке, а также ширину меню не уменьшает. Необходимый результат один и тот же, когда мы нажимаем на «# sidebar-collapse» его отображение вывода мне нужно, когда размер окна уменьшается – Rakhi

Спасибо за помощь. У меня есть выход, боковое меню рушится в сторону с шириной: 50 пикселей; он показывает сообщение по умолчанию «скрыть», но мне нужны значки в этом месте, вы можете помочь с этим? – Rakhi

Вертикальное меню с использованием Bootstrap

ответ

Смежные вопросы