Wie mache ich Bootstrap-Popovers breiter, wenn sie auf der rechten Seite der Eingaben platziert werden?

So ändern Sie die Breite eines Bootstrap-Popovers

Wenn Sie Bootstrap 3 verwenden und versuchen, ein Popover zu implementieren, bei dem sich die Platzierung rechts von einer Eingabekomponente befindet, müssen Sie Möglicherweise tritt ein Problem auf, bei dem die Breite des Popovers nicht ausreichend erscheint. Dieses Problem entsteht durch den Entwurf von Formularsteuerelementen in Bootstrap, der zu Eingabeelementen in voller Breite führt.

HTML-Code

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

CSS-Lösung

Das können Sie Ändern Sie die Breite des Popovers mit 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>

Wenn das Problem dadurch jedoch nicht behoben wird, müssen Sie möglicherweise den Container für das Popover angeben:

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

Durch die Verwendung von und Durch Anpassen der Containereigenschaft wird das Popover auf seine volle Breite erweitert.

Weitere Informationen

• Das Popover ist zunächst auf das auslösende Element beschränkt.
• Durch Angabe des Container als Körper verwenden, ermöglichen Sie dem Popover, sich über die Elementgrenzen hinaus zu erstrecken.
• Die maximale Breite des Popovers wird durch den Container bestimmt.

JSFiddle

Besuchen Sie die folgende JSFiddle, um die Lösung in Aktion zu erleben:

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

Das obige ist der detaillierte Inhalt vonWie mache ich Bootstrap-Popovers breiter, wenn sie auf der rechten Seite der Eingaben platziert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!