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

  1. 18

    Par défaut une barre de navigation composant non enveloppé dans un div.container vous pouvez utiliser le code CSS suivant:

    .nav > li.dropdown.open { position: static; }
.nav > li.dropdown.open .dropdown-menu {display:table; width: 100%; text-align: center; left:0; right:0; }
.dropdown-menu>li { display: table-cell; }

    démo

    La display: table-cell peut également être remplacé par display: inline-block;

    Merci beaucoup, je suis passé à votre solution et il a travaillé pour moi. Désolé pour le retard mais je n'ai pas été là pendant un certain temps et mon téléphone ne m'avertir des réponses à vos questions. +1 et résolu
    je recommanderais d'emballage cette @media (min-width:641px){ } donc la norme déroulant continuerait de s'appliquer pour les appareils mobiles
    Il 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

  2. 2

    Meilleure utilisation de ce plugin

    http://geedmo.github.io/yamm3/

    HTML

    <nav class="navbar yamm navbar-default " role="navigation">
...
     <ul class="nav navbar-nav">
       <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
         <ul class="dropdown-menu">
           <li>
               <div class="yamm-content">
                  <div class="row"> 
                    ...
           </li>
         </ul>
       </li>
     </ul>
...
</nav>

    MOINS

    /*!
 * Yamm!3 - Yet another megamenu for Bootstrap 3
 * http://geedmo.github.com/yamm3
 * 
 * @geedmo - Licensed under the MIT license
 */

//-----------------------------
// Yamm Styles
//-----------------------------

.yamm {

  //reset positions 
  .nav, .collapse, .dropup, .dropdown {
    position: static;
  }  

  //propagate menu position under container for fw navbars
  .container {
    position: relative;
  }

  //by default aligns menu to left
  .dropdown-menu {
    left: auto;
  }

  //Content with padding 
  .yamm-content {
    padding: 20px 30px;
  }

  //Fullwidth menu
  .dropdown.yamm-fw .dropdown-menu {
    left: 0; right: 0;
  }

}
    J'ai utilisé le css du plugin pour ce dont j'avais besoin: une seule option, en pleine largeur, ce qui n'était pas possible d'utiliser le plugin. Bonne ressource.

    OriginalL'auteur Miomir Dancevic

  3. -2

    Avez-vous essayé cette CSS, ça pourrait aider.

     .dropdown-menu {
      min-width:auto;
      width:100%;
 }
    Ce n'est pas la pleine largeur de la fenêtre d'affichage.
    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