缩小 Twitter Bootstrap 3 模态上的弹出框

Question

我正在尝试在 Twitter Bootstrap 模式中显示一个弹出框，作为在表单中显示提示的一种方式。乍一看，一切似乎都正常；然而，仔细观察，我发现无论我在弹出框中放入什么，容器都会自行缩小到可能的最小宽度——即使它有足够的空间可以展开以容纳一行中的内容。

你可以在这个截图中看到这个现象：

（你可以在这里试试：http://jsfiddle.net/swBYA/——点击大按钮显示模态框，然后点击输入显示弹出框）

如果您检查 popover 元素，您会发现它没有固定宽度，并且它的 max-width 超出了它的实际计算宽度。

编辑组件的width 并将其设置为固定数字确实会按预期更改宽度，但它并不干净，因为一些弹出框会变得不必要地大。

将white-space 设置为nowrap 会使容器按预期扩展以适应其内容，但这当然会破坏max-width。

将容器的 position 从 absolute 更改为 relative 会使容器按预期运行，但对齐会变得混乱。我认为这表明它作为模态元素的子元素时绝对定位的事实一定会以某种方式影响它。

为什么会这样？如何修复它，以便弹出框容器将扩展以适应其内容，同时尊重 max-width？

提前致谢:)

Answer 1

欺骗它。

.popover.right { margin-right:-276px; }