navegacion ejemplos derecha centrar bootstrap barra alinear html css twitter-bootstrap drop-down-menu

html - ejemplos - centrar navbar



Bootstrap 3 menĂº desplegable centro alinear no funciona (3)

La única forma fea es establecer la posición según sus necesidades, como:

.dropdown-menu{ right: -25px !important; }

Fiddle

Pero no es la forma en que se debe utilizar. Tenga en cuenta que debe ajustar la configuración para todos los dispositivos multimedia.

No puedo alinear el menú desplegable con el centro del padre en el que se abre el menú desplegable con el cursor. He intentado alinear el texto: centrar para todos los elementos .nav .navbar li, y no funciona. Intenté establecer el margen y me fui: 50% para todo el menú desplegable de ul.que es el menú desplegable y no funciona. Aquí está el código html:

<ul class="nav navbar-nav navbar-right" id="headerDropdowns"> <li><div class="btn-toolbar"> <div class="btn-group"> <button class="btnCustom" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">Our Difference</button> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Made in the USA</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Human Grade</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Ingredients Fresh</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">USDA Meats</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Our Story</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Campare</a></li> </ul> </div> </li> </ul>

¿En qué clase de menú desplegable, o nav nav-nav, debo hacer la alineación y qué debo configurar?


Puede hacer esto siempre y cuando esté dispuesto a dar a la lista desplegable un ancho fijo. Ver código a continuación:

.dropdown{text-align:center;} .button, .dropdown-menu{margin:10px auto} .dropdown-menu{width:200px; left:50%; margin-left:-100px;}

Las primeras 2 declaraciones son para fines de visualización, pero la parte importante es la tercera línea. Tendrá que definir un ancho (en este caso 200px) y luego un margin-left igual a la mitad del ancho. Esto funcionará con cualquier ancho, sin importar si el botón está a la derecha, a la izquierda o entre los elementos (pero, por supuesto, probablemente necesitará algo de espacio para el elemento del button )

Puedes ver un violín aquí