Anpassen der Bootstrap-Popover-Breite
Bootstrap-Popovers liefern wertvolle Informationen zum Hover und werden oft verwendet, um zusätzliche Inhalte oder Anleitungen anzuzeigen. In bestimmten Szenarien kann die Standardbreite von Popovers jedoch unzureichend oder optisch unattraktiv sein. In diesem Artikel werden zwei effektive Methoden zum Erhöhen der Popover-Breite untersucht, ohne Bootstrap-Stile zu überschreiben.
Durch Hinzufügen einer einfachen CSS-Regel zu Ihrem Stylesheet können Sie die maximale Breite von manuell anpassen Popover. Hier ist der Code:
<code class="css">.popover { max-width: 100%; }</code>
Diese Regel legt die maximale Breite des Popovers auf 100 % seines Containers fest. Beachten Sie, dass die tatsächliche maximale Breite von den Abmessungen des Containerelements abhängen kann.
Twitter Bootstrap-Popovers sind standardmäßig in dem Element enthalten, von dem aus sie ausgelöst werden. Um das Popover über das auslösende Element hinaus zu erweitern, können Sie das Containerelement explizit mit jQuery angeben:
<code class="javascript">$('[data-toggle="popover"]').popover({ container: 'body' });</code>
In diesem Beispiel ist das Popover im Body-Element des Dokuments enthalten, sodass es sich auf die volle Breite erweitern kann.
Das folgende Diagramm veranschaulicht das Verhalten von Bootstrap-Popovers mit und ohne Angabe des Containers:
[Bild des Bootstrap-Popovers im auslösenden Element und im Text enthalten]
Tipps:
Das obige ist der detaillierte Inhalt vonWie kann ich die Bootstrap-Popover-Breite anpassen, ohne Stile zu überschreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!