ホームページ > 記事 > ウェブフロントエンド > ブートストラップのポップオーバー幅を制御する方法: Max-Width、コンテナ、および JSFiddle の例
ブートストラップのポップオーバー幅を制御する方法: Max-Width、コンテナ、および JSFiddle の例
- Mary-Kate Olsenオリジナル
- 2024-10-27 11:48:01813ブラウズ
ブートストラップ ポップオーバーの幅の決定
ブートストラップ 3 では、ポップオーバーの幅はトリガー要素内の利用可能なスペースによって制限されます。これにより、フォーム コントロール クラスのような幅の広い入力要素を使用する場合、ポップオーバーが狭くなりすぎる可能性があります。
CSS 幅の変更
ポップオーバーの幅を増やす 1 つの方法は、次のとおりです。 CSS:
<code class="CSS">.popover{
max-width: 100%; /* Max Width of the popover (depending on the container!) */
}</code>
これにより、ポップオーバーの最大幅がコンテナ内の利用可能なスペースの 100% に設定されます。
コンテナの仕様
CSS 幅の変更が有効でない場合は、ポップオーバーのコンテナ要素を指定する必要がある場合があります:
<code class="JS">$('[data-toggle="popover"]').popover({
container: 'body'
});</code>
これは、トリガー要素ではなく body 要素内にポップオーバーを含めるように Bootstrap に指示します。これにより、ポップオーバーが入力要素を超えて拡張できるようになります。
コンテナの関連性
ポップオーバーの幅は次の要素によって決まります:
- 最大幅: max-width CSS プロパティまたは JavaScript によって定義されます。
- コンテナ幅: JavaScript 設定で指定されたコンテナ要素の幅。
この場合、コンテナの幅は本体の 100% に設定されており、ポップオーバーが画面全体に広がることができます。
JSFiddle のデモ
提供された JSFiddle にアクセスして、実際の例を確認してください:
http://jsfiddle.net/xp1369g4/
ポップオーバーの最大幅を調整し、コンテナ要素を指定することによってを使用すると、希望するポップオーバー幅を実現できます。
以上がブートストラップのポップオーバー幅を制御する方法: Max-Width、コンテナ、および JSFiddle の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。