Comment élargir les popovers Bootstrap lorsqu'ils sont placés sur le côté droit des entrées ?

Comment modifier la largeur d'un popover Bootstrap

Lorsque vous utilisez Bootstrap 3 et que vous essayez d'implémenter un popover dont l'emplacement se trouve à droite d'un composant d'entrée, vous peut rencontrer un problème où la largeur du popover semble insuffisante. Ce problème découle de la conception des éléments de contrôle de formulaire dans Bootstrap, qui aboutit à des éléments d'entrée pleine largeur.

Code HTML

<code class="html"><div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" data-toggle="popover" data-trigger="hover" data-content="My popover content.My popover content.My popover content.My popover content.">
    </div>
</div></code>

Solution CSS

Vous pouvez modifiez la largeur du popover à l'aide de CSS :

<code class="css">/* The max width is dependant on the container (more info below) */
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}</code>

Cependant, si cela ne résout pas le problème, vous devrez peut-être spécifier le conteneur du popover :

<code class="javascript">// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});</code>

En utilisant et en ajustant la propriété du conteneur, le popover s'étendra sur toute sa largeur.

Plus d'informations

• Le popover est initialement limité à l'élément déclencheur.
• En spécifiant le conteneur comme corps, vous autorisez le popover à s'étendre au-delà des limites de l'élément.
• La largeur maximale du popover est déterminée par le conteneur.

JSFiddle

Visitez le JSFiddle suivant pour voir la solution en action :

JSFiddle: http://jsfiddle.net/xp1369g4/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!