jak sprawić, by podmenu bootstrap twittera otwierało się po lewej stronie?

Próbowałem utworzyć podmenu bootstrap dla Twittera w menu rozwijanym, ale mam problem: mam menu rozwijane w prawym górnym rogu strony, a to menu ma jeszcze jedno podmenu. Jednak gdy otwiera się podmenu - nie mieści się w oknie i przesuwa się za bardzo w prawo, dzięki czemu użytkownik widzi tylko pierwsze litery. Jak sprawić, by to podmenu otwierało się nie w prawo, ale w lewo?

Najprostszym sposobem byłoby dodanie pull-leftklasy do plikudropdown-submenu

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

jsfiddle: DEMO

Jeśli dobrze to zrozumiałem, bootstrap zapewnia klasę CSS dla tego przypadku. Dodaj „pull-right” do menu „ul”:

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

.. a efekt końcowy jest taki, że opcje menu pojawiają się wyrównane do prawej strony, zgodnie z przyciskiem, z którego są rozwijane.

Obecna klasa .dropdown-submenu > .dropdown-menuma left: 100%;. Tak więc, jeśli chcesz otworzyć podmenu po lewej stronie, nadpisz te ustawienia na ujemną lewą pozycję. Na przykład left: -95%;. Teraz pojawi się podmenu po lewej stronie i możesz dostosować inne ustawienia, aby uzyskać doskonały podgląd.

Oto DEMO

EDYCJA: Pytanie OP i moja odpowiedź pochodzą z sierpnia 2012 roku. W międzyczasie Bootstrap się zmienił, więc teraz masz klasę .pull-left. Wtedy moja odpowiedź była prawidłowa. Teraz nie musisz ręcznie ustawiać css, masz tę klasę .pull-left.

EDYCJA 2: Dema nie działają, ponieważ Bootstrap zmienił ich adresy URL. Po prostu zmień zewnętrzne zasoby w jsfiddle i zastąp je nowymi.

Jeśli używasz bootstrap v4, możesz to zrobić w nowy sposób.

Powinieneś użyć .dropdown-menu-rightna .dropdown-menuelemencie.

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

Prawidłowy sposób wykonania zadania to:

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

Stworzyłem funkcję javascript, która sprawdza, czy ma wystarczająco dużo miejsca po prawej stronie. Jeśli tak, pokaże go po prawej stronie, w przeciwnym razie pokaże go po lewej stronie

Przetestowano w:

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

ponieważ nie chcę dodawać tej poprawki do wszystkich pozycji menu, utworzyłem dla niej nową klasę. ustaw stałe menu na ul:

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

Mam nadzieję, że ci się to uda.

ps. mały błąd w Safari i Chrome, pierwsze najechanie kursorem spowoduje, że mutch po lewej zaktualizuje ten post, jeśli go naprawię.

Jeśli masz tylko jeden poziom i używasz bootstrap 3, dodaj pull-rightdo ulelementu

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

Właściwie - jeśli nie dropdownprzeszkadza ci unoszenie opakowania - stwierdziłem, że jest to tak łatwe, jak dodanie navbar-rightdo dropdown.

Wydaje się, że to oszustwo, ponieważ nie ma go w pasku nawigacyjnym, ale dla mnie działa dobrze.

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

Następnie możesz dodatkowo dostosować pływający pull-leftbezpośrednio w dropdown...

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

... lub jako owijka wokół niego ...

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

Jeśli używasz MNIEJ CSS, napisałem mały mixin, aby przenieść menu za pomocą strzałki łączącej:

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

Następnie, aby przenieść na .dropdown-menuprzykład identyfikator dropdown-menu-x, możesz wykonać:

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

Stworzyłem funkcję javascript, która sprawdza, czy ma wystarczająco dużo miejsca po prawej stronie. Jeśli tak, pokaże go po prawej stronie, w przeciwnym razie pokaże go po lewej stronie. Ponownie, jeśli ma wystarczająco dużo miejsca po prawej stronie, zostanie wyświetlona prawa strona. to jest pętla ...

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

}

});

Czy używasz najnowszej wersji bootstrap? Dostosowałem kod HTML z przykładu Fluid Layout, jak pokazano poniżej. Dodałem listę rozwijaną i umieściłem ją najdalej po prawej stronie, dodając pull-rightklasę. Po najechaniu kursorem na rozwijane menu jest ono automatycznie przeciągane w lewo i nic nie jest ukryte - cały tekst menu jest widoczny. Nie korzystałem z żadnego niestandardowego css.

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

Jedyne, co musisz zrobić, to

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

menu, które chcesz wyświetlić po PRAWEJ stronie.