ブートストラップ ポップオーバーを入力の右側に配置したときに幅を広くするにはどうすればよいですか?

ブートストラップ ポップオーバーの幅を変更する方法

ブートストラップ 3 を使用し、入力コンポーネントの右側に配置されるポップオーバーを実装しようとする場合、ポップオーバーの幅が不十分であるように見える問題が発生する可能性があります。この問題は、Bootstrap のフォーム コントロール要素の設計から発生し、入力要素が全幅になります。

HTML コード

<code class="html"><div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text"
                         data-toggle="popover" data-trigger="hover"
                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div></code>

CSS ソリューション

CSS を使用してポップオーバーの幅を変更します:

<code class="css">/* The max width is dependant on the container (more info below) */
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}</code>

ただし、これで問題が解決しない場合は、ポップオーバーのコンテナを指定する必要がある場合があります:

<code class="javascript">// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});</code>

とコンテナのプロパティを調整すると、ポップオーバーが全幅に拡張されます。

詳細

• ポップオーバーは、最初はトリガー要素に制限されています。
• コンテナをボディとして使用すると、ポップオーバーが要素の範囲を超えて拡張できるようになります。
• ポップオーバーの最大幅はコンテナによって決まります。

JSFiddle

次の JSFiddle にアクセスして、ソリューションの動作を確認してください:

JSFiddle: http://jsfiddle.net/xp1369g4/

以上がブートストラップ ポップオーバーを入力の右側に配置したときに幅を広くするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。