改变引导弹窗的宽度

我正在使用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/

当前回答

借助@EML上面描述的关于模态窗口弹出窗口的帮助，以及@2called-chaos所显示的代码，这就是我解决问题的方式。

我有一个图标在模式，当点击应该弹出

我的HTML

<i title="" class="glyphicon glyphicon-info-sign" rel="popover" data-title="Several Lines" data-content="A - First line<br />B - Second line - Long line <br />C - Third Line - Long Long Long Line"></i>

我的脚本

$('[rel=popover]').popover({
    placement: 'bottom',
    html: 'true',
    container: '#name-of-modal-window .modal-body'
}).on("show.bs.popover", function () { 
$(this).data("bs.popover").tip().css("max-width", "600px"); });

2015-03-11 08:50:11

其他回答

使用CSS增加宽度

你可以使用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!) */
}

如果这不起作用，您可能需要下面的解决方案并更改容器元素。(查看JSFiddle)

推特引导容器

如果这不起作用，你可能需要指定容器:

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

更多信息

弹出窗口包含在触发它的元素中。为了将其扩展为“全宽度”-指定容器:

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

JSFiddle

查看JSFiddle来尝试一下。

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

2014-03-17 16:29:14

container: 'body'通常是这样的(参见上面JustAnil的回答)，但如果你的弹窗是在一个模态中，就会有一个问题。当弹窗附加到body时，z索引将它放在模态后面。这似乎与BS2 5014问题有关，但我在3.1.1上得到了它。你不需要使用容器的主体，但是如果你将代码修正为

   $('#fubar').popover({
   trigger : 'hover',
   html    : true,
   dataContainer : '.modal-body',
   ...etc });

然后你修复了z-index问题，但弹窗宽度仍然是错误的。

我能找到的唯一解决办法是使用container: 'body'，并添加一些额外的css:

.popover { 
  max-width : 400px;
  z-index   : 1060;
}

注意，css解决方案本身是不起作用的。

2014-08-15 12:58:51

试试这个:

var popover_size=($('.popover').css('width'));
var string=(popover_size).split('px');
alert("string"+string);
popover_size = ((parseInt(string[0])+350));
alert("ps"+popover_size);
$('.popover').css('width',parseInt(popover_size));

2015-08-12 09:41:54

您可以更改弹出窗口的模板。可以使用data-template-属性，也可以使用函数中设置它的相关部分:

<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body> <span class="text-green" data-toggle="popover" data-placement="right" data-template="<div class="popover fade top in" style="max-width:none;" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>" data-trigger="manual" data-original-title="Some Title" data-content="<div>Some really long text and stuff. Some really long text and stuff. Some really long text and stuff. Some really long text and stuff.</div>" data-html="true" onclick="$(this).popover('show');">clickme</span> </body> </html>

2019-11-06 12:39:57

Bootstrap 4 beta测试的一个解决方案:

.popover {
        min-width: 30em !important;
    }

和jQuery语句一起使用:

$('[data-toggle="popover"]').popover({
      container: 'body',
      trigger: 'focus',
      html: true,
      placement: 'top'
    })

附注:data-container="body"或container: "body"在HTML中或作为弹窗({})对象的选项都没有真正做到这一点[也许do可以，但只有与CSS语句一起];

另外，请记住Bootstrap 4 beta依赖于popper.js来定位弹出窗口和工具提示(在此之前是tether.js)

2017-08-18 15:36:02

改变引导弹窗的宽度

推荐文章

最新文章

标签