如何控制 Bootstrap Popover 宽度：Max-Width、Container 和 JSFiddle 示例

确定 Bootstrap Popover 宽度

在 Bootstrap 3 中，popover 的宽度受到触发元素内可用空间的限制。当使用诸如表单控件类之类的宽输入元素时，这可能会导致弹出窗口显得太窄。

CSS 宽度修改

增加弹出窗口宽度的一种方法是通过CSS：

<code class="CSS">.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}</code>

这将弹出窗口的最大宽度设置为其容器内可用空间的 100%。

容器规范

如果CSS宽度修改无效，则可能需要指定popover的容器元素：

<code class="JS">$('[data-toggle="popover"]').popover({
    container: 'body'
});</code>

这指示Bootstrap将popover包含在body元素中，而不是触发元素。这允许弹出窗口扩展到输入元素之外。

容器相关性

弹出窗口的宽度由以下因素决定：

• 最大宽度： 由 max-width CSS 属性或 JavaScript 定义。
• 容器宽度： JavaScript 配置中指定的容器元素的宽度。

在本例中，容器宽度设置为主体的 100%，允许弹出窗口拉伸到整个屏幕。

JSFiddle 演示

访问提供的 JSFiddle 查看工作示例：

http://jsfiddle.net/xp1369g4/

通过调整弹出窗口的最大宽度并指定容器元素，就可以达到想要的popover宽度。

以上是如何控制 Bootstrap Popover 宽度：Max-Width、Container 和 JSFiddle 示例的详细内容。更多信息请关注PHP中文网其他相关文章！