Bootstrap menu réduit pas pousser le contenu vers le bas, une fois dépliée
Je suis en utilisant Twitter Bootstrap pour jouer avec de la réactivité du côté d'un site web. J'ai un problème cependant avec la plus petite des largeurs d'où l'effondrement du menu est d'aller sur le contenu de la page, plutôt que de les pousser vers le bas.
J'ai utilisé cet exemple pour construire ma navigation:
http://getbootstrap.com/examples/navbar-fixed-top/
Regardant l'exemple, il ne pousse pas le contenu soit vers le bas.
J'ai vu quelques réponses à cette utilisation de rembourrage sur le corps, mais cela n'a pas fonctionné pour moi. J'ai aussi essayé de mettre dépassement de capacité sur certains éléments, mais sa fait pas de différence.
Mon code pour la navigation est:
<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>
<h1 class="logo-title">
<a href="index.html"><span>Logo</span></a>
</h1>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Je suis nouveau sur le Responsive Design, et ont vu de nombreux sites web avec l'effondrement du menu en poussant vers le bas le contenu. Est il bon de le faire disparaître les menus comme cela ou est-ce un pur préférence chose?
Ma principale question est de savoir comment puis-je obtenir du contenu pour être poussé lors de l'effondrement du menu est actif?
Je vous remercie d'avance pour l'aide.
OriginalL'auteur thairish | 2014-03-21
Vous devez vous connecter pour publier un commentaire.
Je ne sais pas. Cela semble fonctionner... (genre de hack).
OriginalL'auteur Bruno
Si vous utilisez un
fixed
barre de navigation de l'expansion du menu ne poussez vers le bas le contenu. Pour cela, vous devez utiliserstatic
en-tête lui-même. Vérifiez le bootstrap exemple de lien que vous avez donné comme référence.OriginalL'auteur James
Il existe de nombreuses façons que vous pourriez faire.
On pourrait être à bascule une classe sur
.container
ou quel que soit l'élément enveloppe votre contenu en dessous de la navigation.Par exemple:
OriginalL'auteur mbrrw
Aussi pour éviter le blanc de l'espace créé au-dessous de la barre de navigation, ajoutez la ligne suivante à la première "div" après la barre de navigation, e.g: jumborton
OriginalL'auteur mn128b
Dans mon cas, il a travaillé modification de cette
pour cette
et l'édition de mon css:
:
Pour moi, il était en train de changer la version de bootstrap dans une application MVC. La mise en page utilisé la vieille classe.
OriginalL'auteur Jorge Casariego
navbar-fixed-top
.Avoir cela empêche le refoulement de la propriété native de l'accordéon. Vous avez de massage avec votre propre css ou javascript.
OriginalL'auteur Callat
Mentionner un "id" dans
data-target
et d'ajouter que "id" dans la "div" qui ont effondrement de la barre de navigation de code. Comme ci-dessous:Ce
data-target
appelle un "id" et sur la base de votre barre de navigation bascule.OriginalL'auteur Khyati Agola Chandak
CELA FONCTIONNE!!
Eu le même problème et toutes les réponses ici de revenir à un statique de la barre de navigation qui n'est pas ce que vous cherchez.
Jeter un vide balise div (avec la hauteur) après la barre de navigation, mais avant le début de votre contenu. Cette div vide pousse le contenu vers le bas et reste caché derrière la barre de navigation. L'utilisation de javascript/jquery pour basculer sur la div pour les deux mobiles largeurs.
HTML
CSS
Javascript/jquery
OriginalL'auteur MattyIce