我试图在 Twitter Bootstrap 模式中显示一个弹出框,作为在表单中显示提示的一种方式。乍一看,一切似乎都正常;然而,仔细观察,我发现无论我在弹出框中放入什么,容器都会将自身缩小到可能的最小宽度——即使它有足够的空间来扩展以适应一行中的内容。
您可以在此屏幕截图中看到现象:
(你可以在这里试试:http: //jsfiddle.net/swBYA/——点击大按钮显示模式,然后点击输入显示弹出框)
如果您检查 popover 元素,您会发现它没有固定宽度,并且max-width
超出了实际计算的宽度。
编辑组件width
并将其设置为固定数字确实会按预期更改宽度,但它并不干净,因为一些弹出框会变得不必要地大。
设置white-space
为nowrap
使容器按预期扩展以适应其内容,但这当然会破坏max-width
.
将容器的position
from更改为absolute
torelative
会使容器按预期运行,但对齐会变得混乱。我认为这表明它作为模态元素的子元素时绝对定位的事实一定会以某种方式影响它。
为什么会这样?如何修复它,以便弹出框容器将扩展以适应其内容,同时尊重max-width
?
提前致谢 :)