como fazer o submenu de bootstrap do twitter abrir no lado esquerdo?

Eu estava tentando criar um submenu de bootstrap do Twitter no menu suspenso, mas estou com um problema: tenho um menu suspenso no canto superior direito da página e esse menu tem mais um submenu. No entanto, quando o submenu é aberto - ele não cabe na janela e vai muito para a direita, para que o usuário possa ver apenas as primeiras letras. Como fazer esse submenu abrir não para a direita, mas para a esquerda?

A maneira mais simples seria adicionar a pull-leftclasse ao seudropdown-submenu

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

jsfiddle: DEMO

Se entendi direito, o bootstrap fornece uma classe CSS apenas para este caso. Adicione 'pull-right' ao menu 'ul':

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

..e o resultado final é que as opções do menu aparecem alinhadas à direita, em linha com o botão a partir do qual elas são suspensas.

A turma atual .dropdown-submenu > .dropdown-menutem left: 100%;. Portanto, se você deseja abrir o submenu no lado esquerdo, substitua essas configurações para a posição esquerda negativa. Por exemplo left: -95%;. Agora você obterá o submenu do lado esquerdo e poderá ajustar outras configurações para obter uma visualização perfeita.

Aqui está o DEMO

EDIT: A pergunta do OP e minha resposta são de agosto de 2012. Enquanto isso, o Bootstrap mudou, então agora você tem a classe .pull-left. Naquela época, minha resposta estava correta. Agora você não precisa definir manualmente o css, você tem aquela classe .pull-left.

EDIT 2: Demos não está funcionando, porque o Bootstrap mudou seus URLs. Basta alterar os recursos externos no jsfiddle e substituí-los por novos.

Se você estiver usando o bootstrap v4, há uma nova maneira de fazer isso.

Você deve usar .dropdown-menu-rightno .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>

Link para o código: https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

A maneira correta de fazer a tarefa é:

/* 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; }

Eu criei uma função javascript que verifica se ele tem espaço suficiente no lado direito. Se tiver, ele vai mostrar no lado direito, senão ele vai mostrar no lado esquerdo

Testado em:

• 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 não quero adicionar essa correção em todos os itens de menu, criei uma nova classe nele. coloque o menu fixo no ul:

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

Espero que isso funcione para você.

ps. pequeno bug no safari e no cromo, primeiro passe o mouse para colocá-lo para mutch à esquerda para atualizar este post se eu corrigi-lo.

Se você tiver apenas um nível e usar bootstrap 3, adicione pull-rightao ulelemento

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

Na verdade - se você concordar em flutuar o dropdowninvólucro - descobri que é tão fácil quanto adicionar navbar-rightao dropdown.

Isso parece trapaça, já que não está em uma barra de navegação, mas funciona bem para mim.

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

Você pode personalizar ainda mais o flutuante com um pull-leftdiretamente no dropdown...

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

... ou como um envoltório em torno dele ...

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

Se você estiver usando MENOS CSS, escrevi um pequeno mixin para mover o menu suspenso com a seta de conexão:

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

Em seguida, para mover um .dropdown-menucom um id de, dropdown-menu-xpor exemplo, você pode fazer:

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

Eu criei uma função javascript que verifica se ele tem espaço suficiente no lado direito. Se tiver, ele irá mostrá-lo no lado direito, senão ele irá mostrá-lo no lado esquerdo. Novamente, se houver espaço suficiente no lado direito, aparecerá o lado direito. é um loop ...

$(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 });
        }
    });

}

});

Você está usando a versão mais recente do bootstrap? Eu adaptei o html do exemplo do Fluid Layout como mostrado abaixo. Eu adicionei uma lista suspensa e coloquei-a mais à direita, adicionando a pull-rightclasse. Ao passar o mouse sobre o menu suspenso, ele é automaticamente puxado para a esquerda e nada fica oculto - todo o texto do menu fica visível. Eu não usei nenhum 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>

A única coisa que você tem que fazer é

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

do menu que você deseja exibir no lado DIREITO.