Wie wird das Twitter-Bootstrap-Untermenü auf der linken Seite geöffnet?

Ich habe versucht, ein Twitter-Bootstrap-Untermenü im Dropdown-Menü zu erstellen, aber ich habe ein Problem: Ich habe ein Dropdown-Menü in der oberen rechten Ecke der Seite und dieses Menü enthält ein weiteres Untermenü. Wenn das Untermenü geöffnet wird, passt es jedoch nicht in das Fenster und geht zu weit nach rechts, sodass der Benutzer nur die ersten Buchstaben sehen kann. Wie lässt sich dieses Untermenü nicht rechts, sondern links öffnen?

Der einfachste Weg wäre, die pull-leftKlasse zu Ihrer hinzuzufügendropdown-submenu

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

jsfiddle: DEMO

Wenn ich das richtig verstanden habe, bietet Bootstrap eine CSS-Klasse für genau diesen Fall. Fügen Sie 'Pull-Right' zum Menü 'ul' hinzu:

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

..und das Endergebnis ist, dass die Menüoptionen rechtsbündig angezeigt werden, entsprechend der Schaltfläche, von der sie herunterfallen.

Aktuelle Klasse .dropdown-submenu > .dropdown-menuhaben left: 100%;. Wenn Sie also das Untermenü auf der linken Seite öffnen möchten, überschreiben Sie diese Einstellungen auf die negative linke Position. Zum Beispiel left: -95%;. Jetzt erhalten Sie auf der linken Seite ein Untermenü, und Sie können andere Einstellungen anpassen, um eine perfekte Vorschau zu erhalten.

Hier ist DEMO

EDIT: Die Frage von OP und meine Antwort stammen aus dem August 2012. In der Zwischenzeit hat sich Bootstrap geändert, sodass Sie jetzt die Klasse .pull-left haben. Damals war meine Antwort richtig. Jetzt müssen Sie CSS nicht mehr manuell einstellen, sondern haben diese .pull-left-Klasse.

EDIT 2: Demos funktionieren nicht, da Bootstrap ihre URLs geändert hat. Ändern Sie einfach externe Ressourcen in jsfiddle und ersetzen Sie sie durch neue.

Wenn Sie Bootstrap v4 verwenden, gibt es eine neue Möglichkeit, dies zu tun.

Sie sollten .dropdown-menu-rightfür das .dropdown-menuElement verwenden.

<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 zum Code: https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

Der richtige Weg, um die Aufgabe zu erledigen, ist:

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

Ich habe eine Javascript-Funktion erstellt, die prüft, ob auf der rechten Seite genügend Platz vorhanden ist. Wenn ja, zeigt er es auf der rechten Seite an, andernfalls zeigt er es auf der linken Seite an

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

Da ich diesen Fix nicht für alle Menüelemente hinzufügen möchte, habe ich eine neue Klasse darauf erstellt. platziere das feste Menü auf der ul:

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

Ich hoffe das klappt für dich.

ps. kleiner Fehler in Safari und Chrome, erster Hover wird es platzieren, um nach links zu mutchen, wird diesen Beitrag aktualisieren, wenn ich ihn behoben habe.

Wenn Sie nur eine Ebene haben und Bootstrap 3 verwenden, fügen Sie pull-rightdem ulElement hinzu

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

Eigentlich - wenn Sie mit schwimmendem die ok sind dropdownWrapper - ich habe es gefunden ist so einfach zu sein , wie hinzufügen , navbar-rightum die dropdown.

Dies scheint zu schummeln, da es nicht in einer Navigationsleiste ist, aber es funktioniert gut für mich.

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

Sie können das Floating dann mit einem pull-leftdirekt in der dropdown...

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

... oder als Hülle ...

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

Wenn Sie WENIGER CSS verwenden, habe ich ein kleines Mixin geschrieben, um das Dropdown-Menü mit dem Verbindungspfeil zu verschieben:

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

Um dann eine .dropdown-menumit der ID von dropdown-menu-xzu verschieben, können Sie Folgendes tun:

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

Ich habe eine Javascript-Funktion erstellt, die prüft, ob auf der rechten Seite genügend Platz vorhanden ist. Wenn ja, zeigt er es auf der rechten Seite an, andernfalls zeigt er es auf der linken Seite an. Wenn auf der rechten Seite genügend Platz vorhanden ist, wird die rechte Seite angezeigt. es ist eine Schleife ...

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

}

});

Verwenden Sie die neueste Version von Bootstrap? Ich habe das HTML aus dem Fluid Layout-Beispiel wie unten gezeigt angepasst . Ich fügte ein Dropdown hinzu und platzierte es am weitesten rechts, indem ich die pull-rightKlasse hinzufügte . Wenn Sie mit der Maus über das Dropdown-Menü fahren, wird es automatisch nach links gezogen und nichts wird ausgeblendet - der gesamte Menütext ist sichtbar. Ich habe kein benutzerdefiniertes CSS verwendet.

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