css - 在 Twitter Bootstrap 3 模式上缩小弹出窗口

Question

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

您可以在这张截图中看到现象:

(您可以在这里尝试: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; }