web-dev-qa-db-fra.com

Comment faire pour que Twitter bootstrap _ s'ouvre dans la partie gauche?

J'essayais de créer un sous-menu Twitter bootstrap dans le menu déroulant, mais j'ai un problème: j'ai un menu déroulant dans le coin supérieur droit de la page et ce menu comporte un sous-menu supplémentaire. Cependant, lorsque le sous-menu s'ouvre, il ne rentre pas dans la fenêtre et va trop à droite, de sorte que l'utilisateur ne peut voir que les premières lettres. Comment faire pour que ce sous-menu s'ouvre non pas à droite mais à gauche?

javascriptjquerycsstwitter-bootstrap
91
kovpack

Le moyen le plus simple serait d’ajouter la classe pull-left à votre dropdown-submenu

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

jsfiddle: DÉMO

107
Schmalzy

Si j'ai bien compris, bootstrap fournit une classe CSS uniquement pour ce cas. Ajoutez 'pull-right' au menu 'ul':

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

..et le résultat final est que les options du menu apparaissent alignées à droite, en ligne avec le bouton depuis lequel elles sont déroulées.

115
Matt

La classe actuelle .dropdown-submenu > .dropdown-menu a left: 100%;. Donc, si vous voulez ouvrir le sous-menu sur le côté gauche, remplacez ces paramètres par une position négative à gauche. Par exemple, left: -95%;. Maintenant, vous aurez le sous-menu sur le côté gauche, et vous pouvez modifier d'autres paramètres pour obtenir un aperçu parfait.

Voici DÉMO

EDIT: La question d'OP et ma réponse datent d'août 2012. En attendant, Bootstrap a changé, vous avez donc maintenant la classe .pull-left. À l'époque, ma réponse était correcte. Maintenant, vous n'avez pas à définir manuellement css, vous avez cette classe .pull-left.

EDIT 2: les démos ne fonctionnent pas car Bootstrap a changé d'URL. Il suffit de changer les ressources externes dans jsfiddle et de les remplacer par de nouvelles.

25
Miljan Puzović

Si vous utilisez bootstrap v4, il existe un nouveau moyen de le faire.

Vous devez utiliser .dropdown-menu-right sur l'élément .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>

Lien vers le code: https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

18
Felipe Miosso

La bonne façon de faire la tâche est la suivante:

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

Si vous n'avez qu'un seul niveau et que vous utilisez bootstrap 3, ajoutez pull-right à l'élément ul.

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

J'ai créé une fonction javascript qui cherche s'il dispose de suffisamment d'espace sur le côté droit. Si c'est le cas, il l'affichera du côté droit, sinon il l'affichera du côté gauche.

Testé dans:

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

parce que je ne veux pas ajouter ce correctif à tous les éléments de menu, j'ai créé une nouvelle classe dessus. placez le menu fixe sur le ul:

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

J'espère que ça marche pour vous.

ps. petit bug dans safari et chrome, le premier survol le placera sur Mutch à gauche mettra à jour ce post si je le corrige.

4
Mitchel Verschoof

En fait - si vous êtes prêt à faire flotter le wrapper dropdown, je l’ai trouvé aussi simple que d’ajouter navbar-right à dropdown.

Cela ressemble à de la triche, car ce n’est pas dans une barre de navigation, mais cela fonctionne bien pour moi.

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

Vous pouvez ensuite personnaliser le flottant avec un pull-left directement dans le dropdown...

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

... ou comme une enveloppe autour de lui ...

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

J'ai créé une fonction javascript qui cherche s'il dispose de suffisamment d'espace sur le côté droit. Si c'est le cas, il l'affichera du côté droit, sinon, il l'affichera du côté gauche. Encore une fois, s'il y a suffisamment d'espace sur le côté droit, il apparaîtra sur le côté droit. c'est une boucle ...

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

}

});

1
SUAT SUPHI

Utilisez-vous la dernière version de bootstrap? J'ai adapté le code HTML de l'exemple Fluid Layout comme indiqué ci-dessous. J'ai ajouté un menu déroulant et l'ai placé le plus à droite en ajoutant la classe pull-right. En survolant le menu déroulant, il est automatiquement tiré vers la gauche et rien n'est caché - tout le texte du menu est visible. Je n'ai pas utilisé de css personnalisé.

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

Si vous utilisez MOINS CSS, j'ai écrit un petit mixin pour déplacer le menu déroulant avec la flèche de connexion:

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

Ensuite, pour déplacer un .dropdown-menu avec un identifiant de dropdown-menu-x par exemple, vous pouvez faire:

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