Question

下面的费用小提琴。将焦点放在输入字段中并调整浏览器的大小。当容器div重新调整大小时，弹出窗口将被放错位置。

   <div class="container">
      <div class="panel panel-primary">
         <div class="panel-heading">Labor Start</div>
         <div class="panel-body">
            <form class="form-horizontal">
               <div class="form-group">
                  <label class="col-sm-3 control-label" for="employee_number">Employee Number:</label>
                  <div class="col-sm-6 input-group">
                     <input class="form-control" type="text" id="fieldModePopover" href="#" data-html="true"
                     data-content="word word word word word word word word word word word word word word word word word word word word word word word"
                     rel="popover" data-placement="right"
                     data-original-title="Title">
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>

我希望popover保留在输入字段的右侧。

这可能吗？

Answer 1

这是一个已知的＆＃34;错误＆＃34; boostrap，因为popovers不是真的为这种情况构建。你可以试试这样的简单黑客。

只需将以下代码添加到JS：

$(window).resize(function()
{
    if ($(".popover").is(":visible"))
    {
        var popover = $(".popover");
        popover.addClass("noTransition");
        $("input:focus").popover('show');
        popover.removeClass("noTransition");
    }
});

这个课程给你的css：

.noTransition {
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

<强> Working Example

Bootstrap 3.2调整大小会导致使用输入字段和表单进行弹出窗口放置问题

1 个答案: