当放置在输入的右侧时如何使 Bootstrap 弹出窗口更宽？

如何更改 Bootstrap Popover 的宽度

当使用 Bootstrap 3 并尝试实现放置在输入组件右侧的弹出窗口时，您可以可能会遇到弹出窗口宽度显得不足的问题。这个问题是由于 Bootstrap 中表单控制元素的设计导致了全角输入元素。

HTML 代码

<code class="html"><div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text"
                         data-toggle="popover" data-trigger="hover"
                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div></code>

CSS 解决方案

您可以使用 CSS 修改弹出窗口的宽度：

<code class="css">/* The max width is dependant on the container (more info below) */
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}</code>

但是，如果这不能解决问题，您可能需要指定弹出窗口的容器：

<code class="javascript">// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});</code>

通过利用和调整容器属性，弹出框将扩展到其完整宽度。

更多信息

• 弹出框最初仅限于触发元素。
• 通过指定容器作为主体，允许弹出窗口超出元素范围。
• 弹出窗口的最大宽度由容器决定。

JSFiddle

访问以下 JSFiddle 来见证解决方案的实际应用：

JSFiddle: http://jsfiddle.net/xp1369g4/

以上是当放置在输入的右侧时如何使 Bootstrap 弹出窗口更宽？的详细内容。更多信息请关注PHP中文网其他相关文章！