Largeur du popover Bootstrap pour le popover-inner

Question

J'aimerais qu'un popover Bootstrap soit plus large. J'ai lu que cela devrait fonctionner :

.popover-inner a {
   width: 600px;
}

Mais, la console du navigateur montre toujours auto avec le code ci-dessus. Difficile à décrire. Voici un instantané :

Answer 1

D'après ce que j'ai dans mon fichier bootstrap.css, la valeur par défaut est une propriété de largeur maximale.

J'utilise ceci

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  display: none;
  max-width: 600px;
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

et ça fonctionne exactement comme vous l'aviez prévu.

Mon fichier bootstrap.css ne contient pas du tout de sélecteur css pour le popover-inner.

Answer 2

Il y a un demande de retrait sur bootstrap pour rendre cela plus facile, mais vous pouvez le modifier en utilisant cette technique d'établir le template pour le popover :

$('#yourPopover').popover({
  template: '<div class="popover special-class"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
})

Ensuite, vous pouvez définir votre popover special-class css comme vous le souhaitez (largeurs et autres !)

Answer 3

.popover {
  max-width: 600px;
  width: auto;
}

modifier la largeur maximale à la valeur souhaitée, vous pouvez également définir min-width si vous le souhaitez

Answer 4

Si vous voulez contrôler la largeur minimale de votre fenêtre popover, il suffit d'ajouter une ligne supplémentaire dans le css (ou extra css) comme ceci :

.popover
{
    min-width: 200px ! important;
}

(remplacez 200px par la valeur souhaitée)

Answer 5

Voici un exemple d'initialisation que j'utilise.

    $(".property-price")
    .popover({ 
            trigger: "hover", 
            placement: 'bottom',
            toggle : "popover",
            content : "The from price is calculated ba....the dates selected.",
            title: "How is the from price calculated?",
            container: 'body',
            template: '<div class="popover popover-medium"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>',
        });

Comme vous pouvez le voir, il utilise un modèle personnalisé. Le modèle utilise une classe popover-medium personnalisée.

J'ai ensuite un sélecteur CSS

.popover-medium {
    max-width: 350px;
}

Vous pouvez aussi simplement définir un style sur la classe du modèle si vous le souhaitez.