Non-effondrement de bootstrap 3 menu déroulant sur mobile
Je vais essayer d'obtenir un twitter bootstrap menu déroulant pour ne pas s'effondrer et de rester sur la même ligne lors de l'utilisation d'appareils plus petits. Voici à quoi il ressemble actuellement:
J'aimerais que le nom (dans cet exemple, John Smith) pour être en ligne avec Ma Demande de texte et le bouton à bascule. Comment pourrais-je aller sur la réalisation de qui?
Exemple: http://bootply.com/99326
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Application</a>
</div>
<div>
<ul class="nav navbar-nav navbar-right navbar-user">
<li class="dropdown user-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> John Smith <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-user"></i> Profile</a></li>
<li><a href="#"><i class="fa fa-envelope"></i> Inbox <span class="badge">7</span></a></li>
<li><a href="#"><i class="fa fa-gear"></i> Settings</a></li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-power-off"></i> Log Out</a></li>
</ul>
</li>
</ul>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Double question. Voir cette question
Semble le faire, bien que la plupart des réponses sont datés ou se référant à twbs 2. Je suis en train de penser, il y a un moyen facile de le faire dans les dernières versions.
Il n'a pas l'air comme il est facile de "out of the box" façon de le faire, mais je n'ai trouver cette question qui semble avoir deux réponses valides (avec bootstrap 3).
Bootstrap 3 est significativement différente de 2. J'ai posté une réponse ci-dessous.
Semble le faire, bien que la plupart des réponses sont datés ou se référant à twbs 2. Je suis en train de penser, il y a un moyen facile de le faire dans les dernières versions.
Il n'a pas l'air comme il est facile de "out of the box" façon de le faire, mais je n'ai trouver cette question qui semble avoir deux réponses valides (avec bootstrap 3).
Bootstrap 3 est significativement différente de 2. J'ai posté une réponse ci-dessous.
OriginalL'auteur Josh | 2013-12-09
Vous devez vous connecter pour publier un commentaire.
DÉMO: http://jsbin.com/eNUpufIs/2/edit?html,css,sortie
- Je faire la démonstration des liens de gros de sorte que vous pouvez voir.
CSS:
Assurez-vous de tester!
En cliquant sur la liste déroulante n'est pas proche de l'effondrement, mais ce n'est pas un problème grave. La seule chose que je pourrais ajouter pour le rendre un peu plus agréable est la bordure du haut de la liste déroulante. jsbin.com/eYILOcu/1/watch?html,css,output
Yep. Tweak loin. Je n'ai jamais vu une mise en œuvre comme cela, mais c'est sûr qu'il est à portée de main.
Je n'ai, il est particulièrement utile pour des applications mobiles interactives besoin de conserver visible barre de navigation des articles. Bravo pour la cuisine le modèle.
OriginalL'auteur Christina