改变引导弹窗的宽度

我正在使用Bootstrap 3设计一个页面。我试图使用一个弹窗的位置:正确的输入元素。新的Bootstrap确保如果你使用表单控件，你基本上有一个全宽的输入元素。

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>

弹窗宽度太低，在我看来，因为他们没有任何宽度留在div。我想在左侧输入表单，并在右侧宽弹窗。

大多数情况下，我正在寻找一个解决方案，我不需要覆盖引导。

附上的JsFiddle。第二个输入选项。没有使用jsfiddle很多，所以不知道，但尝试增加输出框的大小来查看结果，在较小的屏幕上甚至看不到它。 http://jsfiddle.net/Rqx8T/

当前回答

你可以在弹出窗口中使用属性data-container="body"

<i class="fa fa-info-circle" data-container="body" data-toggle="popover"
   data-placement="right" data-trigger="hover" title="Title"
   data-content="Your content"></i>

2016-12-22 13:29:48

其他回答

要改变宽度，你可以使用css

需要固定尺寸

.popover{
    width:200px;
    height:250px;    
}

需要的最大宽度:

.popover{
    max-width:200px;
    height:250px;    
}

jsfiddle: http://jsfiddle.net/Rqx8T/2/

2013-10-18 12:08:07

这里没有最终的解决方案:/只是一些如何“干净地”解决这个问题的想法…

更新版本(jQuery 1.11 + Bootstrap 3.1.1 + class="col-xs-"而不是class="col-md-")的原始JSFiddle: http://jsfiddle.net/tkrotoff/N99h7/

现在使用您提出的解决方案:http://jsfiddle.net/tkrotoff/N99h7/8/ 它不起作用:弹出窗口的定位相对于<div class="col-*"> +想象你有多个输入相同的<div class="col-*">…

所以如果我们想让弹出窗口保持在输入上(语义上更好):

.popover{位置:固定;}:但是当你每次滚动页面时，弹出窗口将不会跟随滚动 .popover{宽度:100%;}:不是很好，因为你仍然依赖于父宽度(即<div class="col-*"> .popover-content {white-space: nowrap;}:仅当弹出窗口内的文本短于max-width时才有效

参见http://jsfiddle.net/tkrotoff/N99h7/11/

也许，使用最近的浏览器，新的CSS宽度值可以解决这个问题，我没有尝试。

2014-03-12 19:40:28

我也有同样的问题。花了很长时间寻找答案，并找到了自己的解决方案: 在头部添加以下文本:

<风格type = " text / css " > .popover { max-width: 600 px; ｝ > < /风格

2014-07-08 20:47:17

我使用了这个(工作正常):

.popover{
   background-color:#b94a48;
   border:none;
   border-radius:unset;
   min-width:100px;
   width:100%;
   max-width:400px;
   overflow-wrap:break-word;
}

2016-08-12 09:41:46

对于喜欢JavaScript解决方案的人。在Bootstrap 4中tip()变成了getTipElement()，它返回一个非jQuery对象。所以为了改变弹出窗口的宽度在Bootstrap 4你可以使用:

}).on("show.bs.popover", function() {
    $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});

2018-01-15 23:42:33

改变引导弹窗的宽度

推荐文章

最新文章

标签