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