ブートストラップのポップオーバー幅を制御する方法: Max-Width、コンテナ、および JSFiddle の例

ブートストラップ ポップオーバーの幅の決定

ブートストラップ 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=&quot;popover&quot;]').popover({
    container: 'body'
});</code>

これは、トリガー要素ではなく body 要素内にポップオーバーを含めるように Bootstrap に指示します。これにより、ポップオーバーが入力要素を超えて拡張できるようになります。

コンテナの関連性

ポップオーバーの幅は次の要素によって決まります:

• 最大幅: max-width CSS プロパティまたは JavaScript によって定義されます。
• コンテナ幅: JavaScript 設定で指定されたコンテナ要素の幅。

この場合、コンテナの幅は本体の 100% に設定されており、ポップオーバーが画面全体に広がることができます。

JSFiddle のデモ

提供された JSFiddle にアクセスして、実際の例を確認してください:

http://jsfiddle.net/xp1369g4/

ポップオーバーの最大幅を調整し、コンテナ要素を指定することによってを使用すると、希望するポップオーバー幅を実現できます。

以上がブートストラップのポップオーバー幅を制御する方法: Max-Width、コンテナ、および JSFiddle の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。