如何控制 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=&quot;popover&quot;]').popover({
    container: 'body'
});</code>

這指示Bootstrap將popover在body元素中，而不是觸發元素。這允許彈出視窗擴展到輸入元素之外。

容器相關性

彈出視窗的寬度由下列因素決定：

• 最大寬度：
• 容器寬度： JavaScript 配置中指定的容器元素的寬度。

在本例中，容器寬度設定為主體的 100%，允許彈出視窗拉伸到整個螢幕。

JSFiddle 示範

訪問提供的JSFiddle 查看工作範例：

http://jsfiddle.net/xp1369g4/

透過調整彈出視窗的最大寬度並指定容器元素，就可以達到想要的popover寬度。

以上是如何控制 Bootstrap Popover 寬度：Max-Width、Container 和 JSFiddle 範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！