ブートストラップのポップオーバー幅を制御する方法: Max-Width、コンテナ、および JSFiddle の例-CSSチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-10-27 11:48:01

オリジナル

945 人が閲覧しました

How to Control Bootstrap Popover Width: Max-Width, Container, and JSFiddle Example

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

ブートストラップ 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 に指示します。これにより、ポップオーバーが入力要素を超えて拡張できるようになります。

コンテナの関連性

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

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

JSFiddle のデモ

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

http://jsfiddle.net/xp1369g4/

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

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