web-dev-qa-db-fra.com

Options du menu déroulant de la barre de navigation Bootstrap 4 Right

Comme vous le voyez dans l'image ci-dessous, lorsque je clique sur l'icône de la cloche, un menu déroulant apparaît en bas à droite de l'icône. Je veux que ce menu déroulant apparaisse en bas à gauche au lieu de en bas à droite. Que devrais-je faire? 

 enter image description here

Si vous voulez voir mon code, il est écrit avec php:

function navigation(){
    $output = "";
    $icons = ["user","bell","envelope","commenting"];
    $rows = [2,5,5,5];
    for ($i=0; $i < count($icons) ; $i++) {
      $output .= '<div class="dropdown">';
      $output .= '<a class="nav-item nav-link" data-toggle="dropdown">';
      $output .= '<i class="fa fa-'.$icons[$i].'"></i></a>';
      $output .= '<div class="dropdown-menu text-right">';
      for ($j=0; $j < $rows[$i] ; $j++) {
        $output .= '<a href="#" class="dropdown-item">'.($j+1).'</a>';
      }
      $output .= '</div>';
      $output .= '</div>';
    }
    return $output;
  }

Et puis, cette sortie sera répercutée dans un fichier html:

<nav class="navbar">
  <div class="container">
    <div class="navbar-nav d-flex flex-row">
      <?= navigation() ?>
    </div>
  </div>
</nav>
phpdrop-down-menubootstrap-4
11
eylay

Utilisez la classe dropdown-menu-right pour aligner les éléments du menu à droite.

    <div class="dropdown-menu dropdown-menu-right text-right">
        <a class="dropdown-item" href="#">Link</a>
        <a class="dropdown-item" href="#">Link</a>
        <a class="dropdown-item" href="#">Link</a>
    </div>

http://codeply.com/go/6Mf9aK0P8G

27
Zim

Mise à jour pour Bootstrap4-Beta:

Comme il y a un bogue dans bootstrap4 beta i devait ajouter

.dropdown-menu-right { 
    right: 0; 
    left: auto; 
}

pour le faire fonctionner.

16
Javan R.

La classe .dropdown-menu-right a un comportement différent si elle se trouve dans un .navbar. Vous pouvez lire le "Heads up" dans la documentation ici:

https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment

En fait, pour résoudre, j'utilise cette classe:

.navbar .dropdown-menu-right { 
    right: 0; 
    left: auto; 
}
3
Fred K

J'ai rencontré le même problème avec une difficulté supplémentaire car mon menu est créé dans PHP - le nombre d'éléments et le contenu de la liste déroulante n'est pas corrigé.

Voici une solution qui centre les menus déroulants lorsque possible, sinon alignez-les à gauche ou à droite pour les empêcher de dépasser la fenêtre d'affichage:

var $maxWidthElement = $('.navbar'),
    maxWidth = $maxWidthElement.width();

var positionDropdowns = function() {
    $('.dropdown-menu').each(function() {
        var $navItem = $(this).closest('.dropdown'),
            dropdownWidth = $(this).outerWidth(),
            dropdownOffsetLeft = $navItem.offset().left,
            dropdownOffsetRight = maxWidth - (dropdownOffsetLeft + dropdownWidth),
            linkCenterOffsetLeft = dropdownOffsetLeft + $navItem.outerWidth() / 2;

        if ((linkCenterOffsetLeft - dropdownWidth / 2 > 0) & (linkCenterOffsetLeft + dropdownWidth / 2 < maxWidth)) {
            // center the dropdown menu if possible
            $(this).css('left', -(dropdownWidth / 2 - $navItem.outerWidth() / 2));
        } else if ((dropdownOffsetRight < 0) & (dropdownWidth < dropdownOffsetLeft + $navItem.outerWidth())) {
            // set the dropdown menu to left if it exceeds the viewport on the right
            $(this).addClass('dropdown-menu-right');
        } else if (dropdownOffsetLeft + dropdownWidth > maxWidth) {
            // full width if the dropdown is too large to fit on the right
            $(this).css({
                left: 0,
                right: 0,
                width:
                    $(this)
                        .closest('.container')
                        .width() + 'px'
            });
        }
    });
};

var resizeTimer;

$(window).on('resize', function(e) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        maxWidth = $maxWidthElement.width();
        positionDropdowns();
    }, 250);
});

positionDropdowns();
window.onresize = positionDropdowns;

https://codepen.io/migli/pen/RELPPj

0
migli