在Twitter Bootstrap 3模式上缩小popover

时间:2013-10-17 16:50:23

标签: css twitter-bootstrap

我正在尝试在Twitter Bootstrap模式中显示一个弹出框,作为在表单中显示提示的一种方式。乍一看,一切似乎都运转正常;然而,仔细观察,我发现无论我放入popover,容器都会缩小到最小可能的宽度 - 即使有足够的空间扩展以适应其内容的一行。

您可以在此屏幕截图中看到此现象:

The problem

(你可以在这里试试:http://jsfiddle.net/swBYA/ - 点击大按钮显示模态,然后点击输入以显示弹出窗口

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

编辑组件的width并将其设置为固定数字确实会改变宽度,但它并不干净,因为一些弹出窗口会变得不必要的大。

white-space设置为nowrap会使容器展开以符合预期的内容,但这当然会破坏max-width

将容器的positionabsolute更改为relative会使容器按预期运行,但对齐会变得混乱。我认为这表明它在成为模态元素的孩子时绝对定位的事实必然会以某种方式影响它。

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

提前致谢:)

1 个答案:

答案 0 :(得分:1)

欺骗它。

.popover.right { margin-right:-276px; }
相关问题