¿Cómo hacer que el submenú bootstrap de Twitter se abra en el lado izquierdo?

Estaba intentando crear el submenú de arranque de Twitter en el menú desplegable, pero tengo un problema: tengo un menú desplegable en la esquina superior derecha de la página y ese menú tiene un submenú más. Sin embargo, cuando se abre el submenú, no cabe en la ventana y se desplaza demasiado hacia la derecha, por lo que el usuario solo puede ver las primeras letras. ¿Cómo hacer que ese submenú no se abra a la derecha, sino a la izquierda?

La forma más sencilla sería agregar la pull-leftclase a sudropdown-submenu

<li class="dropdown-submenu pull-left">

jsfiddle: DEMO

Si lo he entendido bien, bootstrap proporciona una clase CSS solo para este caso. Agregue 'pull-right' al menú 'ul':

<ul class="dropdown-menu pull-right">

..y el resultado final es que las opciones del menú aparecen alineadas a la derecha, en línea con el botón desde el que se despliegan.

La clase actual .dropdown-submenu > .dropdown-menutiene left: 100%;. Por lo tanto, si desea abrir el submenú en el lado izquierdo, anule esos ajustes a la posición izquierda negativa. Por ejemplo left: -95%;. Ahora obtendrá el submenú en el lado izquierdo y podrá modificar otras configuraciones para obtener una vista previa perfecta.

Aquí está la DEMO

EDITAR: La pregunta de OP y mi respuesta son de agosto de 2012. Mientras tanto, Bootstrap cambió, por lo que ahora tiene la clase .pull-left. En ese entonces, mi respuesta fue correcta. Ahora no tiene que configurar manualmente css, tiene esa clase .pull-left.

EDICIÓN 2: Las demostraciones no funcionan porque Bootstrap cambió sus URL. Simplemente cambie los recursos externos en jsfiddle y reemplácelos por otros nuevos.

Si está utilizando bootstrap v4, hay una nueva forma de hacerlo.

Deberías usar .dropdown-menu-righten el .dropdown-menuelemento.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Enlace al código: https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

La forma correcta de realizar la tarea es:

/* Submenu placement itself */
.dropdown-submenu > .dropdown-menu { left: auto; right: 100%; }
/* Arrow position */
.dropdown-submenu { position: relative; }
.dropdown-submenu > a:after { position: absolute; left: 7px; top: 3px; float: none; border-right-color: #cccccc; border-width: 5px 5px 5px 0; }
.dropdown-submenu:hover > a:after { border-right-color: #ffffff; }

He creado una función de javascript que busca si tiene suficiente espacio en el lado derecho. Si lo tiene, lo mostrará en el lado derecho, de lo contrario lo mostrará en el lado izquierdo

Probado en:

• Firefox (mac)
• Chorme (mac)
• Safari (mac)

Javascript:

$(document).ready(function(){
    //little fix for the poisition.
    var newPos     = $(".fixed-menuprofile .dropdown-submenu").offset().left - $(this).width();
    $(".fixed-menuprofile .dropdown-submenu").find('ul').offset({ "left": newPos });

    $(".fixed-menu .dropdown-submenu").mouseover(function() {
        var submenuPos = $(this).offset().left + 325;
        var windowPos  = $(window).width();
        var oldPos     = $(this).offset().left + $(this).width();
        var newPos     = $(this).offset().left - $(this).width();

        if( submenuPos > windowPos ){
            $(this).find('ul').offset({ "left": newPos });
        } else {
            $(this).find('ul').offset({ "left": oldPos });
        }
    });
});

porque no quiero agregar esta corrección en todos los elementos del menú, creé una nueva clase en él. coloque el menú fijo en el ul:

<ul class="dropdown-menu fixed-menu">

Espero que esto funcione para usted.

PD. pequeño error en safari y chrome, primero al pasar el mouse lo colocará para mutch a la izquierda actualizará esta publicación si lo soluciono.

Si solo tiene un nivel y usa bootstrap 3, agregue pull-rightal ulelemento

<ul class="dropdown-menu pull-right" role="menu">

En realidad, si está de acuerdo con hacer flotar el dropdowncontenedor, me pareció tan fácil como agregarlo navbar-rightal archivo dropdown.

Esto parece una trampa, ya que no está en una barra de navegación, pero funciona bien para mí.

<div class="dropdown navbar-right">
...
</div>

A continuación, puede personalizar aún más el flotante con un pull-leftdirectamente en el dropdown...

<div class="dropdown pull-left navbar-right">
...
</div>

... o como envoltorio a su alrededor ...

<div class="pull-left">
  <div class="dropdown navbar-right">
  ...
  </div>
</div>

Si está usando MENOS CSS, escribí un pequeño mixin para mover el menú desplegable con la flecha de conexión:

.dropdown-menu-shift( @num-pixels, @arrow-position: 10px ) {  // mixin to shift the dropdown menu
    left: @num-pixels;
    &:before { left: -@num-pixels + @arrow-position; }        // triangle outline
    &:after  { left: -@num-pixels + @arrow-position + 1px; }  // triangle internal
}

Luego, para mover a .dropdown-menucon una identificación de, dropdown-menu-xpor ejemplo, puede hacer:

#dropdown-menu-x {
    .dropdown-menu-shift( -100px );
}

He creado una función de javascript que busca si tiene suficiente espacio en el lado derecho. Si es así, lo mostrará en el lado derecho, de lo contrario, lo mostrará en el lado izquierdo. Nuevamente, si tiene suficiente espacio en el lado derecho, se mostrará el lado derecho. es un bucle ...

$(document).ready(function () {

$('body, html').css('overflow', 'hidden');
var screenWidth = $(window).width();
$('body, html').css('overflow', 'visible');

if (screenWidth > 767) {

    $(".dropdown-submenu").hover(function () {

        var dropdownPosition = $(this).offset().left + $(this).width() + $(this).find('ul').width();
        var newPosition = $(this).offset().left - $(this).find('ul').width();
        var windowPosition = $(window).width();

        var oldPosition = $(this).offset().left + $(this).width();
        //document.title = dropdownPosition;
        if (dropdownPosition > windowPosition) {
            $(this).find('ul').offset({ "left": newPosition });
        } else {
            $(this).find('ul').offset({ "left": oldPosition });
        }
    });

}

});

¿Está utilizando la última versión de bootstrap? He adaptado el html del ejemplo de diseño fluido como se muestra a continuación. Agregué un menú desplegable y lo coloqué más a la derecha agregando la pull-rightclase. Al pasar el cursor sobre el menú desplegable, se desplaza automáticamente hacia la izquierda y no se oculta nada: todo el texto del menú es visible. No he utilizado ningún CSS personalizado.

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse collapse">
        <ul class="nav pull-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown open">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <p class="navbar-text pull-right">
          Logged in as <a href="#" class="navbar-link">Username</a>
        </p>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

Lo único que tienes que hacer es

 <ul style='left:-100%'> 

del menú que desea mostrar en el lado DERECHO.