ホームページ > 記事 > ウェブフロントエンド > 簡潔かつ魅力的である必要があることを念頭に置いて、タイトルのオプションをいくつか示します。 直接的かつ有益: * Bootstrap 3 のポップオーバーをフォーム要素の幅を超えて拡張するにはどうすればよいですか? * ブートストラップ Popove の作成
ブートストラップ ポップオーバーの幅を増やす方法
ブートストラップ 3 を使用する場合、フォーム要素の右側に配置されたポップオーバーの幅が制限されることがあります。フォーム コントロールの全幅の性質に合わせて。ここでは、Bootstrap のデフォルト スタイルの上書きを回避するいくつかの解決策を示します:
オプション 1: カスタム CSS
この CSS をスタイルシートに追加します:
<code class="css">.popover { max-width: 100%; /* Increase the popover's maximum width */ }</code>
オプション 2: ポップオーバー コンテナの指定
デフォルトでは、ポップオーバーはそれをトリガーする要素内に含まれます。ポップオーバーを全幅にするには、JavaScript を使用して別のコンテナを指定します。
<code class="js">$('[data-toggle="popover"]').popover({ container: 'body' // Contain the popover within the body element });</code>
追加情報
JSFiddle のデモ
この JSFiddle のソリューションの動作デモをご覧ください: https://jsfiddle.net/xp1369g4/
以上が簡潔かつ魅力的である必要があることを念頭に置いて、タイトルのオプションをいくつか示します。 直接的かつ有益: * Bootstrap 3 のポップオーバーをフォーム要素の幅を超えて拡張するにはどうすればよいですか? * ブートストラップ Popove の作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。