як змусити відкрити підменю twitter bootstrap з лівого боку?

Я намагався створити підменю twitter bootstrap у спадному меню, але у мене проблема: у мене є спадне меню у верхньому правому куті сторінки, і в цьому меню є ще одне підменю. Однак, коли підменю відкривається - воно не поміщається у вікні і надто сильно рухається вправо, так що користувач може бачити лише перші літери. Як зробити так, щоб підменю відкривалося не праворуч, а ліворуч?

Найпростішим способом було б додати pull-leftклас до вашогоdropdown-submenu

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

jsfiddle: DEMO

Якщо я правильно зрозумів, bootstrap надає клас CSS саме для цього випадку. Додайте слово "тягнути вправо" до меню "ul":

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

..і кінцевим результатом є те, що параметри меню відображаються по правому краю, відповідно до кнопки, з якої вони випадають.

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

Ось DEMO

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

EDIT 2: Демонстраційні програми не працюють, оскільки Bootstrap змінив їх URL-адреси. Просто змініть зовнішні ресурси в jsfiddle і замініть їх новими.

Якщо ви використовуєте bootstrap v4, є новий спосіб це зробити.

Ви повинні використовувати .dropdown-menu-rightна .dropdown-menuелементі.

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

Посилання на код: https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

Правильний спосіб виконання завдання:

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

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

Випробувано в:

• Firefox (mac)
• Чорме (mac)
• Сафарі (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">

Сподіваюся, це у вас вийде.

ps. маленька помилка в сафарі та хромі, спочатку наведіть курсор, щоб розмістити його зліва, оновить цю публікацію, якщо я це виправлю.

Якщо у вас є тільки один рівень , і ви використовуєте завантажувальний 3 доповнення pull-rightдо ulелементу

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

Насправді - якщо у вас все добре з плаваючою 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>

Якщо ви використовуєте МЕНШЕ CSS, я написав невелику комбінацію, щоб перемістити випадаючий список зі стрілкою, що з'єднує:

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

Потім, щоб перемістити a .dropdown-menuз ідентифікатором, dropdown-menu-xнаприклад, ви можете зробити:

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

Я створив функцію 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 });
        }
    });

}

});

Чи використовуєте ви останню версію bootstrap? Я адаптував html із прикладу Fluid Layout, як показано нижче. Я додав розкривне меню і поставив його найдалі праворуч, додавши 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>

Єдине, що вам потрібно зробити, це

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

меню, яке потрібно відобразити праворуч.