как сделать twitter bootstrap подменю, чтобы открыть на левой стороне?

Если я правильно понял, bootstrap предоставляет класс CSS только для этого случая. Добавьте 'pull-right' в меню 'ul':

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

..и конечным результатом является то, что параметры меню отображаются выровненными по правому краю, в соответствии с кнопкой, с которой они выпадают.

Curent class .dropdown-submenu > .dropdown-menu есть left: 100%;. Итак, если вы хотите открыть подменю с левой стороны, переопределите эти настройки в отрицательную левую позицию. Например left: -95%;. Теперь вы получите подменю на левой стороне, и вы можете настроить другие настройки, чтобы получить идеальный предварительный просмотр.

здесь демо

EDIT: вопрос OP и мой ответ относятся к августу 2012 года. Между тем, Bootstrap изменился, так что теперь у вас есть .тяни-левый класс. Тогда мой ответ был правильным. Теперь ты не нужно вручную устанавливать css, у вас есть это .тяни-левый класс.

EDIT 2: демонстрации не работают, потому что Bootstrap изменил их URL-адреса. просто измените внешние ресурсы в jsfiddle и замените их новыми.

правильный способ выполнения задачи:

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

Если вы используете bootstrap v4, есть новый способ сделать это.

вы должны использовать .dropdown-menu-right на .dropdown-menu элемент.

ссылка на код: http://v4-alpha.getbootstrap.com/components/dropdowns/#menu-alignment

Я создал функцию javascript, которая выглядит, если у него достаточно места на правой стороне. Если он есть, он покажет его на правой стороне, иначе он покажет его на левой стороне

проверен в:

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

потому что я не хочу, чтобы добавить это исправление на всех пунктов меню я создал новый класс на нем. поместите фиксированное меню на ул:

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

Я надеюсь, что это работает для вас.

ps. маленькая ошибка в safari и chrome, сначала наведите курсор на нее, чтобы mutch слева обновит этот пост, если я его исправил.

Если у вас есть только один уровень, и вы используете bootstrap 3 Добавить pull-right до ul элемент

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

на самом деле - если вы согласны с плавающей dropdown обертка-я нашел, что это так же просто, как добавить navbar-right до dropdown.

это похоже на обман, так как это не в navbar, но он отлично работает для меня.

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

затем вы можете дополнительно настроить плавающий с pull-left непосредственно в dropdown...

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

... или как обертка вокруг него ...

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

Я создал функцию javascript, которая выглядит, если у него достаточно места на правой стороне. Если это так, он покажет его с правой стороны, иначе он покажет его с левой стороны. Опять же, если у него есть достаточно места на правой стороне, он покажет правую сторону. это петля...

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

}

});

если вы используете меньше CSS, я написал немного mixin, чтобы переместить выпадающий список с помощью соединительной стрелки:

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

затем переместить .dropdown-menu с идентификатором dropdown-menu-x например, вы можете сделать:

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

вы используете последнюю версию bootstrap? Я адаптировал html из пример компоновки жидкости как показано ниже. Я добавил падение вниз и поместил его дальше всего в правую сторону, добавив pull-right класса. При наведении курсора на выпадающее меню оно автоматически вытягивается влево и ничего не скрывается-весь текст меню виден. Я не использовал никаких пользовательских 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>