Estoy tratando de crear todo el ancho desplegable usando bootstrap como se puede ver en esta foto. Ahora tengo algo como esto (he eliminado los elementos innecesarios de la nav en la lista):

<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>

Y necesito crear desplegable como este. No he hecho ningún cambio a la barra de exploración y desplegable menos archivos – esta es la razón por la que no post CSS, es pura Bootstrap 3.2.0. Acabo de jugar con las reglas de CSS en Chrome, movilidad ellos y cambia los valores de ellos (los que tienen algo de común con el posicionamiento).

Añadido mis propias reglas, pero todavía no puedo encontrar la manera de hacer que el 100% de ancho de ventana. Probablemente heredará el ancho de los padres que – por supuesto – no tiene ancho de ventana. Este podría ser el problema.

También He encontrado este tema pero no me ayudan. Yo estaba en una etapa donde tengo alrededor de 800px de ancho desplegable (cuando he usado width: 100%), pero fue alineado en «Kalkulačky» y que si quería que se inicia en el borde izquierdo de la pantalla, tuve que usar left: -100px. ¿Tienes alguna idea? Estoy competente perdido.

Por favor, ser benevolente – no tengo buenos conocimientos en CSS y acabo de empezar con Bootstrap.

OriginalEl autor Northys | 2014-10-19

3 Comentarios

  1. 18

    Por un defecto navbar componente no envuelto en una div.container puede utilizar el siguiente CSS:

    .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; }

    demo

    La display: table-cell también puede ser reemplazado con display: inline-block;

    Muchísimas gracias, me cambié a su solución y que trabajó para mí. Perdón por el retraso pero no he estado aquí por un tiempo y mi teléfono no notificarme acerca de su respuesta. +1 y solucionado
    yo recomendaría envolver esta en @media (min-width:641px){ } por lo que el estándar desplegable todavía sería de aplicación para dispositivos móviles
    No parece ser un problema con safari, ¿verdad? El sub-menú no desaparece correctamente …
    no sé. Si el demo no funciona en safari se deben posible hacer una nueva pregunta (o me compre una mac para que yo pueda probar 🙂 )
    ¿stackoverflow.com/questions/30043487/… solucionar tu problema?

    OriginalEl autor Bass Jobsen

  2. 2

    Mejor utilizar este 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>

    MENOS

    /*!
     * 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;
      }
    
    }
    He utilizado el css del plugin para lo que yo necesitaba: una sola opción en todo el ancho, la cual no era posible con el plugin como es. Buen recurso.

    OriginalEl autor Miomir Dancevic

  3. -2

    ¿Has probado este CSS, podría ayudar.

     .dropdown-menu {
          min-width:auto;
          width:100%;
     }
    No es completo ancho de ventana.
    Lo siento, que debe ser del 100%. ¿El uso de <div class=»contenedor»> en la parte superior de su estructura?
    he encontrado este por lo tanto, voy a probarlo. Sí, yo no – contenedor está dentro de <header>.
    Aquí está lleno de origen – gist.github.com/anonymous/9071228345594997eb36

    OriginalEl autor iamprogrammer10

Dejar respuesta

Please enter your comment!
Please enter your name here