jquery - Bootstrap 4 和日期选择器下拉位置

Question

我在 boostrap-datepicker-plugin 1.7.1 中使用 bootstrap 4(最终版本)
由于 Bootstrap 4 不再使用 .input-group-addon 元素(用于日历图标)而是使用 .input-group-prepend 和 .input-group-append 我以这种方式修改了插件代码

//this.component = this.element.hasClass('date') ? this.element.find('.add-on, .input-group-addon, .btn') : false;

this.component = this.element.hasClass('date') ? this.element.find('.input-group-prepend, .input-group-append, .btn') : false;

通过这种方式，插件似乎可以很好地处理新的输入组元素，但不幸的是，如果我将 css 边距添加到包含日期选择器输入的容器中，下拉菜单将显示在错误的位置。

Jsfiddle

我试图找到解决这个问题的方法，但没有成功。有人可以帮我解决这个问题吗？

谢谢

Answer 1

你应该有一个带有 position: relative 的容器来让插件正确计算位置。

在你的例子中是 default container是body，所以你可以设置

body {
  position: relative;
}

或者更好，在datepicker初始化时定义一个不同的容器:

$( ".date" ).datepicker({
  container: '.container',
  format: "dd-mm-yyyy",
  autoclose: true,
  todayHighlight: true
});

然后设置相对于.container类的位置

.container {
  position: relative;
}

FIDDLE here