javascript - 日期时间选择器将输入元素与它的 css 混淆

Question

我有绑定(bind)到 jquery 日期时间选择器控件的输入元素。元素以 html 形式呈现，如

<input id="DateFrom" class="form-control text-right" type="text" value="" name="DateFrom" data-val-date="The field Date From must be a date." data-val="true">

日期时间控制很好，但我有问题，当单击日期时间选择器时，我的输入元素按其宽度缩小，日期时间图标向下移动 29 像素。

在 datetime picker 上的 firebug 中查看点击跟随在 dom 中呈现

<div class="bootstrap-datetimepicker-widget dropdown-menu usetwentyfour bottom" style="display:block; top:29px; ... "> ... </div>

所以我尝试针对整个类(class)并使用 css 删除顶部

.bootstrap-datetimepicker-widget + .dropdown-menu + .usetwentyfour + .bottom {
    top: 0 !important;
}

但这并没有改变什么。

Answer 1

So i tried to target this whole class and to remove top using css

.bootstrap-datetimepicker-widget + .dropdown-menu + .usetwentyfour + .bottom {
    top: 0 !important;
}

选择 .bootstrap-datetimepicker-widget -> adjacent sibling .dropdown-menu -> 相邻兄弟 -> .usetwentyfour -> 相邻兄弟 -> .bottom ，而不是

<div class="bootstrap-datetimepicker-widget dropdown-menu usetwentyfour bottom" 
  style="display:block; top:29px; ... "> ... </div>

你应该可以使用选择器

div.bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour.bottom

或

div.bootstrap-datetimepicker-widget