удалить переключатель в пределах мобильной точки останова

Question

Надеюсь, кто-то может с этим справиться.

У меня есть навигационная панель, подобная той, что мы видим на GMail, Facebook и т. Д. С помощью кнопки User Avatar с такими параметрами, как настройки, учетная запись, выход из системы. У меня также есть основная навигация по веб-сайту с значком аватара.

Когда экран просмотра на мобильном устройстве Navbar разрушается, как это следует, однако, я хочу кнопку аватара тумблер исчезнуть так появляется меню, как:

<li><a href="#"><span class="glyphicon glyphicon-cloud-upload"></span> Upload</a></li> 
<li><a href="#"><span class="glyphicon glyphicon-globe"></span> Globe</a></li> 
<li><a href="#"><span class="glyphicon glyphicon-star"></span> Favourite</a></li> 
<li class="divider"></li> 
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Me</a></li> 
<li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-cog"></span> Settings</a></li> 
<li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit Profile</a></li> 
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li> 

Heres скрипка: http://jsfiddle.net/Z5Txw/

Answer 1

Добавьте класс hidden-xs к элементу, который вы хотите скрыть, когда панель навигации рухнула. Обновлена ​​скрипка: http://jsfiddle.net/Z5Txw/3/.

Edit: я редактировал скрипку, основанный на комментарий, добавив еще с ул visible-xs, чтобы достичь того, чего вы хотите. Теперь это выглядит так:

<!-- Visible when navbar is collapsed --> 
<ul class="nav navbar-nav visible-xs"> 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Me</a> 
     </li> 
     <li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-cog"></span> Settings</a> 
     </li> 
     <li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit Profile</a> 
     </li> 
     <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a> 
     </li> 
    </ul> 

    <!-- Visible when navbar isn't collapsed. --> 
    <ul class="nav navbar-nav navbar-right hidden-xs"> 
     <li class="avatar-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
       <img src="http://placehold.it/30x30" height="30px" class="img-circle avatar" alt="Avatar"> 
      </a> 

      <ul class="dropdown-menu"> 
       <li><a href="#"><span class="glyphicon glyphicon-user"></span> Me</a> 
       </li> 
       <li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-cog"></span> Settings</a> 
       </li> 
       <li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit Profile</a> 
       </li> 
       <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 

Answer 2

Вы можете использовать классы hidden-xs и visible-xs для создания разных меню. В главном меню навигации и навигации по аватарам используйте hidden-xs и создайте другое меню для мобильного устройства с классом visible-xs. Например: jsfiddle.net/Z5Txw/2/