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

Posted 2023-03-06

【中文标题】Bootstrap 3 弹出框在“响应”模式下不起作用

【英文标题】：Bootstrap 3 popover doesn't work in "responsive" mode

【发布时间】：2015-01-02 05:38:27

【问题描述】：

这是我的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)

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

【参考方案1】：

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

#fieldModePopover 
    display: inline-block;    

【讨论】：

我最诚挚的道歉@Stever Sanders (+1) - 看来我在那个 jsFiddle 中发布了我的 CSS 的旧版本。请查看我的latest jsFiddle，它具有正确的 CSS。我尝试了您的更改，但它不起作用。想法？再次感谢！

@smeeb 它确实有效 :) 更新了你的新小提琴：jsfiddle.net/3zahh3w6

好@Stever Sanders（再次+1）！嘿，你是怎么让页脚变粘的？！？我喜欢它！