jquery - 如何在特定屏幕宽度的输入字段左侧打开 Bootstrap 日期选择器

Question

我有几个来自 eyecon.ro 的引导日期选择器实例我想在下方(默认)打开一些日期选择器，在日期输入字段的左侧打开一些日期选择器，其中向左移动仅在某些屏幕宽度下使用 CSS @media 查询。我试过在 jQuery 中使用 addClass()，还尝试用带有类的 div 包装。

将日期选择器向左移动的媒体查询是:

@media (min-width: 768px) and (max-width: 1680px) {
    div.datepicker{ margin-top:-140px!important;margin-left:-220px!important;}
}

但目前，这适用于所有实例，而我需要它是有选择性的。有什么想法吗？

Answer 1

如果可以用类包装在 div 中，请尝试 CSS +选择器:

HTML:

<div class="datepicker-on-left">
  <div class="datepicker"><div/>
</div>

CSS:

@media (min-width: 768px) and (max-width: 1680px) {
    div.datepicker-on-left + div.datepicker { 
      margin-top:-140px!important;
      margin-left:-220px!important;
    }
}