css - Bootstrap 3 弹出窗口在 "responsive"模式下不起作用

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 标记由 Bootstrap 样式指定 display: block，导致其宽度为 100%。如果您尝试将弹出窗口放置在其右侧，则此方法将不起作用。添加 display: inline-block 将导致它只占用所需的空间，而不是全屏宽度。更新 fiddle :https://jsfiddle.net/mgup49hv/1/

#fieldModePopover {
    display: inline-block;    
}