Как сделать подменю twitter bootstrap для открытия с левой стороны?

Ответ 1

Самый простой способ - добавить класс pull-left к dropdown-submenu

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

jsfiddle: DEMO

Ответ 2

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

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

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

Ответ 3

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

Вот DEMO

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

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

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

Я создал функцию 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:

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

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

пс. небольшая ошибка в сафари и хром, сначала наведите курсор налево, обновите этот пост, если я его исправил.

Ответ 7

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

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

Ответ 8

Используете ли вы последнюю версию бутстрапа? Я адаптировал 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>

Ответ 9

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

.dropdown-menu-shift( @num-pixels, @arrow-position: 10px ) {  // mixin to shift the dropdown menu
    left: @num-pixels;
    &:before { left: [email protected] + @arrow-position; }        // triangle outline
    &:after  { left: [email protected] + @arrow-position + 1px; }  // triangle internal
}

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

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

Ответ 10

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

Это похоже на обман, так как он не на навигационной панели, но он отлично работает для меня.

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