Pleine largeur Bootstrap déroulant nav
Je suis en train de créer toute la largeur de liste déroulante à l'aide de bootstrap comme vous pouvez le voir sur cette photo. Maintenant, j'ai quelque chose comme ceci (j'ai enlevé les éléments inutiles de la valeur liquidative de la liste):
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/_work/cz.krupovi/www/o-nas">O nás</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Kalkulačky <span class="caret"></span></a>
<ul class="dropdown-menu list-inline" role="menu">
<li><a href="#">RPSN Kalkulačka</a>
</li>
<li><a href="#">Inflační kalkulačka</a>
</li>
</ul>
</li>
</ul>
Et j'ai besoin de créer déroulant comme celui-ci. Je n'ai pas fait de changements à la barre de navigation et déroulante moins de fichiers - c'est la raison pour laquelle je ne poste pas de CSS, c'est de la pure Bootstrap 3.2.0. Je viens de jouer avec des règles CSS de Chrome, les handicapés et les valeurs modifiées d'entre eux (ceux qui ont quelque chose de commun avec le positionnement).
Ajouté mes propres règles mais je ne peux pas comprendre comment le faire à 100% de la largeur de la fenêtre d'affichage. Probablement, il hérite de la largeur du parent qui - bien sûr - n'a pas de fenêtre de la largeur. Ce pourrait être le problème.
Aussi J'ai trouvé ce sujet mais il ne m'a pas aidé. J'étais au stade où je l'ai eu sur 800px de largeur déroulante (quand j'ai utilisé width: 100%
), mais il a été aligné en vertu de la "Kalkulačky" et si je voulais qu'il démarre sur le bord gauche de l'écran, j'ai dû utiliser left: -100px
. Avez-vous des idées? Je suis avec compétence perdu.
S'il vous plaît être bienveillant - je n'ai pas de bonnes connaissances en CSS et j'ai commencé avec Bootstrap.
OriginalL'auteur Northys | 2014-10-19
Vous devez vous connecter pour publier un commentaire.
Par défaut une barre de navigation composant non enveloppé dans un
div.container
vous pouvez utiliser le code CSS suivant:démo
La
display: table-cell
peut également être remplacé pardisplay: inline-block;
je recommanderais d'emballage cette
@media (min-width:641px){ }
donc la norme déroulant continuerait de s'appliquer pour les appareils mobilesIl semble y avoir un problème avec safari, droit? Le sous-menu ne s'affiche pas correctement ...
je ne sais pas. Si le démo ne fonctionne pas sur safari, vous devriez possible de poser une nouvelle question (ou m'acheter un mac, donc je peux le tester 🙂 )
ne stackoverflow.com/questions/30043487/... de résoudre votre problème?
OriginalL'auteur Bass Jobsen
Meilleure utilisation de ce plugin
http://geedmo.github.io/yamm3/
HTML
MOINS
OriginalL'auteur Miomir Dancevic
Avez-vous essayé cette CSS, ça pourrait aider.
Désolé, ce doit être de 100%. Avez-vous utiliser des <div class="container"> en haut de votre structure?
j'ai trouvé ce je vais donc l'essayer. Oui, je ne conteneur est à l'intérieur de
<header>
.Ici est plein de la source gist.github.com/anonymous/9071228345594997eb36
OriginalL'auteur iamprogrammer10