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

Question

费 fiddle 如下。将焦点放在输入字段中并调整浏览器宽度。当容器 div 调整大小时，弹出窗口将错位。

http://jsfiddle.net/024pvz9d/

   <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>

我希望弹出窗口保留在输入字段的右侧。

这可能吗？

Answer 1

这是 boostrap 的一个已知“错误”，因为弹出窗口并不是真正为这种情况构建的。您可以像这样尝试一个简单的 hack。

只需将以下代码添加到您的 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