Modification de la largeur de twitter bootstrap liste

Je suis en train de changer la largeur de twitter bootstrap liste à l'aide de bootstrap 3: 

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
$('#popover').popover(options)

Au moment où le contenu dans la liste des écarts de plus de deux lignes. Je veux la liste de contenu pour rester sur une seule ligne. Est-ce possible?

Je suis à l'aide de C#, html et css.

InformationsquelleAutor user3395822 | 2014-03-08
  1. 78

    Vous pouvez modifier la liste des dimensions avec les CSS:

    .popover{
    width:200px;
    height:250px;    
}

    Mais que CSS va changer TOUTES les popovers. Ce que vous devez faire est de mettre le bouton dans un conteneur de l'élément et utiliser les CSS comme ceci:

    #containerElem .popover {
  width:200px;
  height:250px;
  max-width:none; //Required for popovers wider than 276px (Bootstrap's max-width for popovers)
}

    Vous devez également modifier data-container="#containerElem" pour correspondre à votre conteneur.

    REMARQUE: Si votre liste va avoir une largeur supérieure à 276px, vous devez remplacer la max-width bien ainsi. Ajoutez donc max-width: none à la .popover {} classe.

    Voici un jsFiddle: http://jsfiddle.net/4FMmA/

    • Merci c'est une excellente réponse. L'écharpe est très bien, mais si je réglage de la largeur sur le conteneur '10000px' 'Vivamus sagittis lacus vel augue' est toujours sur une ligne, tandis que la "laoreet rutrum faucibus' est sur la deuxième ligne
    • Est-ce cela que vous voulez dire? jsfiddle.net/4FMmA/1 en fait, je ne vois pas de différence avec le 10000px largeur de l'élément conteneur.
    • Maintenant, chaque mot est sur une ligne distincte pour chaque violon? Par le réglage de la largeur de l'écharpe j'espérais que tout allait être sur une seule ligne.
    • Ok, je vois ce que tu veux dire, si vous voulez vous faire la liste assez long pour ne pas envelopper le texte. Permettez-moi de le vérifier et voir ce qui se passe.
    • Bootstrap définit un max-width propriété CSS, donc j'ai juste eu à le modifier. Cela résout-il: jsfiddle.net/w5NdV
    • Bonne réponse, a travaillé pour moi. Bien que j'ai trouvé: "max-width: 600px; width: auto;" a également travaillé.
    • A travaillé pour moi, bien que n'besoin d'inclure des !important de substituer les valeurs définies dans le bootstrap.

    InformationsquelleAutor Gavin
  2. 17

    Si vous souhaitez contrôler la largeur en javascript:

    HTML (exemple de "Bootstrap")

    <button id="exampleButton" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top</button>

    Javascript:

    Nous avons mis le max-width quand show.bs.popover événement est déclenché:

    var p = $("#exampleButton").popover();
p.on("show.bs.popover", function(e){
    p.data("bs.popover").tip().css({"max-width": "500px"});
});

    http://jsfiddle.net/ctoesca/u3kSk

    • Vous pouvez également ajouter un data-max-width l'attribut de l'élément bouton et obtenir la valeur de la fonction de déclenchement:
    p.on("show.bs.popover", function(e){
    var w = $(this).attr("data-max-width");
    p.data("bs.popover").tip().css({"max-width": w});
});
    InformationsquelleAutor c-toesca
  3. 12
    .popover{
    max-width: 100%;
    width: <width>;
}

    Le 'max-width' jeux de max-width de liste à la largeur de la page.
    Vous pouvez ensuite définir la largeur que vous voulez

    • J'ai essayé de 20 versions différentes et celle-ci ne fonctionne pour moi. Merci!
    InformationsquelleAutor sunnyiitkgp
  4. 2

    Je pourrais avoir une solution plus facile:

    Ajouter le suivant classe css:

    .app-popover-fw { width: 276px; }

    Utilisation suivantes modèle pour votre liste

    var newPopoverTemplate = '<div class="popover app-popover-fw" role="popover">' +
                             '<div class="arrow"></div>'+ 
                             '<h3 class="popover-title"></h3>'+
                             '<div class="popover-content"></div>'+
                          '</div>';

$('#example').popover({template: newPopoverTemplate });`

    De travail violon: http://jsfiddle.net/b5Ly2ynd/

    NB: Comme d'autres ont dit, il y a un "max-width" bien sur bs popovers. Vous avez besoin de modifier celui-ci si vous voulez que votre liste de plus de 276px.

    InformationsquelleAutor Xavier13
  5. 2

    Vous pouvez ajuster la largeur de la fenêtre pop-over, mais la meilleure chose à faire est de définir la largeur du contenu avant de le Bootstrap voit est. Par exemple, j'avais une table, j'ai défini la largeur, puis bootstrap construit une liste adaptées à celui-ci. (Parfois Bootstrap a de la difficulté à déterminer la largeur, et vous avez besoin d'intervenir et de tenir sa main)

    InformationsquelleAutor CloudMagick
  6. 2

    Utiliser ce code . Il fonctionne parfaitement:

      .popover{
       background-color:#b94a48;
       border:none;
       border-radius:unset;
       min-width:100px;
       width:100%;
       max-width:400px;
       overflow-wrap:break-word;
    }
    InformationsquelleAutor Bimal Das
  7. 1

    J'ai utilisé le code suivant:

    .popover {
      width: 600px;
      max-width: 600px;
      font-size: 13px;
      font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
      word-break: break-all;
      word-wrap: break-word;
      white-space: pre;
      width: 600px;
    }
    InformationsquelleAutor superlogical
  8. 1

    Une autre option est d'utiliser un modèle personnalisé comme (ajouté seule classe supplémentaire: liste-lg):

    <div class="popover popover-lg" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>

    Ensuite dans le css:

    .popover-lg {
    max-width: 100%;
}

    Invocation:

    $(".your-element")..popover({
        trigger: "hover",
        template: templateString,
        container: "body",
        content: '...',
    });

    De cette manière, il est propre et n'interfère pas d'origine bootstrap comportement.

    InformationsquelleAutor Marcin
  9. 0

    Vous pouvez le faire de deux façons, on est en réduisant la taille de police pour la catégorie "liste" et l'autre est de réduire le rembourrage dans la catégorie "liste de contenu'. Voici comment je l'ai réalisé, 

    .popover {
  font-size: 12px;
}

.popover-content {
  padding: 5px 5px;
}
    InformationsquelleAutor Harsha Rastogi
  10. 0

    Vous pouvez utiliser les CSS pour augmenter la largeur de votre liste.

    .popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}
    InformationsquelleAutor Asiri Jayaweera
  11. 0

    La meilleure méthode que j'ai trouvé pour affecter la liste des propriétés de sans directement leur remplaçant, dans un CSS remplacer classe, est d'utiliser le conteneur de l'attribut lors de l'instanciation de la liste, puis à l'aide d'un sélecteur complexe de remplacer les propriétés, ce qui permet de garder les propriétés d'origine pour toute autre popovers vous voudrez peut-être dans une autre zone de votre site.

    Simplement primordial max-width dans le .liste fonctionnera bien sûr, mais il faut vivre avec qui remplacent pour tout, essentiellement en battant le but.

    Ce que j'ai à faire est de mettre le récipient de ma liste pour le conteneur de l'élément déclencheur, puis la création d'un complexe de classe CSS comme .conteneur > .liste qui définit le max-width de la liste uniquement de cette instance.

    InformationsquelleAutor iGanja