So steuern Sie die Bootstrap-Popover-Breite: Beispiel für maximale Breite, Container und JSFiddle

Bestimmen der Bootstrap-Popover-Breite

In Bootstrap 3 wird die Breite von Popovers durch den verfügbaren Platz innerhalb des auslösenden Elements eingeschränkt. Dies kann dazu führen, dass Popovers zu schmal erscheinen, wenn breite Eingabeelemente wie die Form-Control-Klasse verwendet werden.

CSS-Breitenänderung

Eine Methode zum Erhöhen der Popover-Breite ist durch CSS:

<code class="CSS">.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}</code>

Dies legt die maximale Breite des Popovers auf 100 % des verfügbaren Platzes innerhalb seines Containers fest.

Containerspezifikation

Wenn die Änderung der CSS-Breite nicht effektiv ist, muss möglicherweise das Containerelement für das Popover angegeben werden:

<code class="JS">$('[data-toggle=&quot;popover&quot;]').popover({
    container: 'body'
});</code>

Dadurch wird Bootstrap angewiesen, das Popover im Body-Element und nicht im auslösenden Element zu enthalten. Dadurch kann sich das Popover über das Eingabeelement hinaus erstrecken.

Containerrelevanz

Die Breite eines Popovers wird durch die folgenden Faktoren bestimmt:

• Maximale Breite: Definiert durch die CSS-Eigenschaft „max-width“ oder durch JavaScript.
• Containerbreite: Die Breite des in der JavaScript-Konfiguration angegebenen Containerelements.

In diesem Fall wird die Containerbreite auf 100 % des Körpers eingestellt, sodass sich das Popover über den gesamten Bildschirm erstrecken kann.

JSFiddle-Demonstration

Besuchen Sie das bereitgestellte JSFiddle, um ein funktionierendes Beispiel zu sehen:

http://jsfiddle.net/xp1369g4/

Durch Anpassen der maximalen Breite des Popovers und Angabe des Containerelements , können Sie die gewünschte Popover-Breite erreichen.

Das obige ist der detaillierte Inhalt vonSo steuern Sie die Bootstrap-Popover-Breite: Beispiel für maximale Breite, Container und JSFiddle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!