ヒントをフォームに表示する方法として、Twitter Bootstrap モーダル内にポップオーバーを表示しようとしています。一見すると、すべて正常に動作しているように見えます。しかし、よく見ると、ポップオーバーに何を入れても、コンテナーは可能な限り最小の幅に縮小することがわかります。ただし、1 行にコンテンツを収めるために拡張する十分なスペースがあるにもかかわらずです。
このスクリーンショットで現象を確認できます。
(ここで試すことができます: http://jsfiddle.net/swBYA/ – 大きなボタンをクリックしてモーダルを表示し、入力をクリックしてポップオーバーを表示します)
max-widthポップオーバー要素を調べると、幅が固定されておらず、実際に計算された幅を超えていることがわかります。
コンポーネントを編集widthして固定数に設定すると、期待どおりに幅が変更されますが、一部のポップオーバーが不必要に大きくなるため、きれいではありません。
に設定white-spaceするnowrapと、コンテナーは期待どおりにコンテンツに合わせて拡張されますが、これはもちろんmax-width.
コンテナーのpositionを からabsoluteに変更するrelativeと、コンテナーは期待どおりに動作しますが、配置がめちゃくちゃになります。これは、モーダル要素の子でありながら絶対配置されているという事実が何らかの影響を与えているに違いないことを示唆していると思います。
なぜこうなった？を尊重しながら、ポップオーバーコンテナがその内容に合わせて拡大するように修正するにはどうすればよいmax-widthですか?
前もって感謝します ：）