Bootstrap datepicker总是在顶部弹出的问题该如何修复？

问题原因 #

Bootstrap datepicker默认将弹窗挂载在body元素下，使用绝对定位计算位置，你给父级div添加的margin-top不会作用到弹窗上。同时固定定位的navbar脱离了正常文档流，弹窗计算坐标时不会自动把navbar高度计入偏移量，就会出现弹窗固定在顶部的问题。

修复方案 #

• 方案1：指定弹窗挂载容器
  初始化datepicker时添加container配置，将弹窗挂载到输入框的父级容器内，弹窗会继承父容器的位置偏移，示例代码：

  // #datepickerParent替换为你实际的父级div的ID
  $('.datepicker').datepicker({
    container: '#datepickerParent'
  })
  

• 方案2：强制弹窗弹出方向
  通过orientation配置强制弹窗优先向输入框下方弹出，避免向上偏移到导航栏区域：

  $('.datepicker').datepicker({
    orientation: 'bottom auto'
  })
  

• 方案3：手动添加偏移量
  如果不想修改挂载容器，直接通过offset配置设置弹窗的向下偏移值，值和你的navbar高度一致即可：

  // 假设navbar高度为60px
  $('.datepicker').datepicker({
    offset: 60
  })
  

• 方案4：排查全局样式冲突
  检查全局CSS是否给.datepicker-dropdown类设置了固定的top属性，如果有相关规则删除或重置即可。

问题示例截图 #

内容的提问来源于stack exchange，提问作者Akhilesh