Bootstrap 3 弹出框在“响应”模式下不起作用

Question

这是我的JSFiddle 完整代码示例。

请注意如何将鼠标悬停在橙色道路字形图标上并正确显示我的弹出框？好吧，当我将 Result 部分的宽度缩小到菜单垂直堆叠的点，然后我将鼠标悬停在弹出框上时，它不会呈现。对我来说，这意味着当用户从移动浏览器查看我的应用时，它不会呈现。

我试过了：

#fieldMode .popover {
    min-width: 300px
}

#fieldMode .popover-title {
    color: rgb(255,102,0);
    background: rgb(176,205,249);
}

#fieldMode .popover-content {
    color: rgb(12,66,144)
}

...但这似乎不起作用。解决方法是什么？

Answer 1

在移动设备上，您的 a 标记由引导样式指定为 display: block，导致宽度为 100%。如果您试图将弹出框定位在它的右侧，这将不起作用。添加display: inline-block 将导致它只占用它需要的空间而不是全屏宽度。更新小提琴：https://jsfiddle.net/mgup49hv/1/

#fieldModePopover {
    display: inline-block;    
}