come aprire il sottomenu bootstrap di Twitter sul lato sinistro?

Stavo cercando di creare il sottomenu bootstrap di Twitter nel menu a discesa, ma ho un problema: ho un menu a discesa nell'angolo in alto a destra della pagina e quel menu ha un altro sottomenu. Tuttavia, quando si apre il sottomenu, non si adatta alla finestra e si sposta troppo a destra, in modo che l'utente possa vedere solo le prime lettere. Come fare in modo che quel sottomenu si apra non a destra, ma a sinistra?

Il modo più semplice sarebbe aggiungere la pull-leftclasse al tuo filedropdown-submenu

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

jsfiddle: DEMO

Se ho capito bene, bootstrap fornisce una classe CSS solo per questo caso. Aggiungi "pull-right" al menu "ul":

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

..e il risultato finale è che le opzioni di menu appaiono allineate a destra, in linea con il pulsante da cui scendono.

La classe attuale .dropdown-submenu > .dropdown-menuha left: 100%;. Quindi, se vuoi aprire il sottomenu sul lato sinistro, sovrascrivi quelle impostazioni nella posizione sinistra negativa. Ad esempio left: -95%;. Ora otterrai un sottomenu sul lato sinistro e puoi modificare altre impostazioni per ottenere un'anteprima perfetta.

Ecco DEMO

EDIT: la domanda di OP e la mia risposta sono dell'agosto 2012. Nel frattempo, Bootstrap è cambiato, quindi ora hai la classe .pull-left. Allora, la mia risposta era corretta. Ora non devi impostare manualmente css, hai quella classe .pull-left.

EDIT 2: le demo non funzionano, perché Bootstrap ha cambiato i loro URL. Basta cambiare le risorse esterne in jsfiddle e sostituirle con nuove.

Se stai usando bootstrap v4 c'è un nuovo modo per farlo.

Si dovrebbe usare .dropdown-menu-rightsul .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>

Collegamento al codice: https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

Il modo corretto per eseguire l'attività è:

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

Ho creato una funzione javascript che guarda se ha abbastanza spazio sul lato destro. In caso affermativo, lo mostrerà sul lato destro, altrimenti lo visualizzerà sul lato sinistro

Testato in:

• 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 });
        }
    });
});

perché non voglio aggiungere questa correzione a tutte le voci di menu su cui ho creato una nuova classe. posizionare il menu fisso su ul:

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

Spero che funzioni per te.

ps. piccolo bug in Safari e Chrome, il primo passaggio del mouse lo posizionerà su mutch a sinistra aggiornerà questo post se l'ho risolto.

Se si dispone di un solo livello e si utilizza bootstrap 3 add pull-rightal ulelemento

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

In realtà, se ti va di far fluttuare il dropdownwrapper, ho trovato che è facile come aggiungere navbar-rightal file dropdown.

Sembra un inganno, dato che non è in una barra di navigazione, ma per me funziona bene.

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

È quindi possibile personalizzare ulteriormente il galleggiante con un pull-leftdirettamente nel dropdown...

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

... o come un involucro attorno ad esso ...

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

Se stai usando MENO CSS, ho scritto un piccolo mixin per spostare il menu a discesa con la freccia di collegamento:

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

Quindi per spostare un .dropdown-menucon un id di, dropdown-menu-xad esempio, puoi fare:

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

Ho creato una funzione javascript che guarda se ha abbastanza spazio sul lato destro. In caso affermativo, lo mostrerà sul lato destro, altrimenti lo visualizzerà sul lato sinistro. Anche in questo caso, se ha abbastanza spazio sul lato destro, verrà visualizzato il lato destro. è un 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 });
        }
    });

}

});

Stai usando l'ultima versione di bootstrap? Ho adattato l'html dall'esempio Fluid Layout come mostrato di seguito. Ho aggiunto un menu a discesa e l'ho posizionato più a destra aggiungendo la pull-rightclasse. Quando si passa con il mouse sul menu a discesa, viene automaticamente spostato a sinistra e non viene nascosto nulla: tutto il testo del menu è visibile. Non ho utilizzato alcun CSS personalizzato.

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

L'unica cosa che devi fare è

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

del menu che si desidera visualizzare a DESTRA.