改变引导弹窗的宽度

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

当前回答

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

基本上我把弹窗代码放在行div，而不是输入div。解决了这个问题。

2013-10-26 08:00:43

其他回答

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

基本上我把弹窗代码放在行div，而不是输入div。解决了这个问题。

2013-10-26 08:00:43

借助@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

你还可以添加data-container="body"，它可以完成这项工作:

<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-container="body"
               data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>

2014-08-18 15:18:42

你可以在弹出窗口中使用属性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

要改变弹窗宽度，你可以重写模板:

$('#name').popover({
    template: '<div class="popover" role="tooltip" style="width: 500px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
})

2014-07-09 07:34:29

改变引导弹窗的宽度

推荐文章

最新文章

标签