Comment puis-je empêcher l'amorçage de Twitter de réduire les menus déroulants du haut de la page à des largeurs de navigateur inférieures à 960 pixels?

J'ai essayé de jouer avec les différentes classe min/max hauteur et la largeur en CSS et ne semble pas empêcher le haut de la barre de navigation de s'effondrer mes menus déroulants. Je préfère une largeur fixe, mais en plein écran menu fixe en haut. Les listes déroulantes fonctionne correctement, mais lorsque je réduis la largeur de la fenêtre du navigateur qu'il s'effondre. J'ai enlevé la bascule mais pas de l'amour de bootstrap. Voici le code de bootstrap 2.0:

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="./index.html">Brand Name&nbsp;</a>
<ul class="nav">
<form class="navbar-search">
<input type="text" class="search-query" placeholder="Search Active Page...">
</form>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-user icon-white"></i>&nbsp;Pages<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">My Pages</a></li>
<li><a href="#">New Page</a></li>
<li class="divider"></li>
<li><a href="#">Share Your Pages</a></li>
<li><a href="#">Page Browswer</a></li>
</ul>
</li> 
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-cog icon-white"></i>&nbsp;Settings<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Upload Images</a></li>
<li><a href="#">Upload Files</a></li>
<li><a href="#">Link Other Accounts</a></li>
<li><a href="#">Manage Labels</a></li>
<li class="divider"></li>
<li><a href="#">Privacy Settings</a></li>
<li><a href="#">Help</a></li>
</ul>
</li> 
<li>&nbsp;&nbsp;<img src="img/small_fb_pic.jpg" vspace="5px"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
John<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Logout</a></li>
<li class="divider"></li>
<li><a href="#">Help</a></li>
</ul>
</li>      
</ul>  <!-- end left justified menu items -->
</div>
</div>
</div>

source d'informationauteur CleanTheRuck

  1. 1

    C'est pour le responsive design sur les sites web qui peuvent s'adapter à la taille de l'écran (en particulier sur les appareils mobiles). En savoir plus ici:

    http://twitter.github.com/bootstrap/scaffolding.html#responsive

    Pour résoudre ce problème sur le fichier de démarrage de la solution, aller à l'amorçage de personnaliser la page, décochez la case Sensible Mises en page et de le re-télécharger vos fichiers d'amorçage.

    http://twitter.github.com/bootstrap/download.html

    C'est mieux que d'éditer les fichiers d'amorçage manuelle, de l'omi. Espérons que cette aide.

  2. 6

    La largeur des définitions pour le fluide de mise en page sont contenues dans css/bootstrap-responsive.css vous pouvez modifier les plages à qui bootstrap va s'effondrer le menu en modifiant simplement l' min-width et max-width valeurs dans le @media définitions.

    Par exemple pour faire de la barre de navigation de s'effondrer dans une fenêtre à moins de 800px remplacer la barre de navigation liées @media déclarations contenant max-width: 980px avec max-width: 800px. Faire de même pour min-width. Au moment de la rédaction, ces changements qui est arrivé à être sur les lignes 105281et 381 de telle sorte que chaque ligne modifiée pour ressembler à celui-ci (ils sont probablement différent maintenant):

    105: @media (min-width: 768px) and (max-width: 800px) { ... }

    281: @media (max-width: 800px) { ... }

    381: @media (min-width: 800px) { ... }

  3. 2

    Pour 3 très utile solutions, voir ce lien:
    http://taylor.fausak.me/2012/03/15/dropdown-menu-in-twitter-bootstraps-collapsed-navbar/

    J'ai fini à l'aide de l'option 1 sur sa liste... le sens de base est de modifier votre Réactivité.moins ou Réactive.css si vous n'avez pas accès à l' .moins de sources, comme tel:

    Ajouter:
    :not([données non-effondrement="true"])

    Partout la classe suivante stylings sont définis.
    .barre de navigation .dropdown-menu

    (J'en ai trouvé 7 places dans le réactif.moins fichier)

    Ensuite, lorsque vous définissez votre code html, vous aurez envie d'ajouter un attribut:

    <div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i>
{{ account.FirstName}} {{ account.LastName }}&nbsp;
<b class="caret"></b>
</a>
<ul class="dropdown-menu" data-no-collapse="true">
<li><a href="/logout.cshtml">Logout</a></li>
</ul>
</div>

    Avis les données non-effondrement de l'attribut sur la liste non ordonnée.

    EDIT:
    Maintenant, votre déroulant ne se développe pas...

  4. 1

    Je crois que vous parlez de démarrage de la version 2. Peut-être quelqu'un qui cherche une réponse pour Bootstrap 3 va arriver ici. Cette réponse est pour vous!

    1. Aller à Bootstrap de personnalisation de la page
    2. redéfinir l' @grille-float-point d'arrêt de la valeur pour quelque chose de codé en dur (ex: 520px) ou pour un écran de plus petite taille comme @screen-xs-min
    3. Appuyez sur le bouton au bas de la page pour recompiler les fichiers css
    4. remplacer votre fichier d'amorçage.css et bootstrap-min.css fichiers avec ceux du fichier zip téléchargé.
  5. 0
    1. Aller à bootstrap-responsive.fichier css
    2. Aller à la ligne numéro 952
    3. Modifier la largeur de la largeur à laquelle vous souhaitez que la barre de navigation à l'effondrement
  6. -2

    Supprimer le lien vers la feuille de style bootstrap-responsive.css de votre code HTML et rien ne va s'effondrer plus.