Bootstrap modal 引导数据采集器下降

我不是Bootstrap3方面的专家。这是我第一次使用小部件“datepicker”。我有两个日期选择器，需要相互内联显示。当我尝试一个正常的输入时，它会工作，但如果它是一个日期选择器，它在底部会走得有点远。我尝试了相对位置，但它没有解决问题。请参阅附加的屏幕截图。 希望有人能给我一些启示。下面是我的代码

<div class="horiz-search-bar-wrapper">
              <form class="form-inline">
                <div class="form-group">
                  <label><strong>Search</strong></label>
                </div>

                <div class="input-daterange">
                  <div class="form-group rel-position-date">
                    <label>Check-In:</label>
                    <div class="input-group input-append date" id="from">
                      <input type="text" class="form-control">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    </div>
                  </div>
                  <div class="form-group rel-position-date">
                    <label>Check-Out</label>
                    <div class="input-group input-append date" id="to">
                      <input type="text" class="form-control">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    </div>
                  </div>
                </div>


                <div class="form-group mar-left">
                  <button type="button" class="btn btn-primary">
                           Submit
                  </button>
                </div>
              </form>
         </div>

搜索
登记入住：
退房
提交

---

`

这只是一个更新，我们可以通过将

标记替换为

来解决这个问题。引导数据采集器在看到多个标签时会添加顶部像素

---

希望这能对其他人有所帮助。

我也看到了日期选择器太低的问题。无论目标元素是朝向视口的顶部还是底部，并且日期选择器分别朝向元素上方或下方，我都看到日期选择器看起来“太低”

偶然发现了一个补丁，其中一些JavaScript黑客绑定到DP的“show”事件/挂钩

注意本机Boostrap CSS实用程序类的使用

datepicker-orienttop

和

datepicker-orientbottom

$('#DateOfBirthForEditing').datepicker().on("show", function (e) {

    var refDatePicker = $('div.datepicker.datepicker-dropdown');
    var refDatePickerField = $('#DateOfBirthForEditing');
    var fieldPositionTop = refDatePickerField.offset().top;

    var dpModalTopOffset = 0;

    if (refDatePicker.hasClass('datepicker-orient-top')) {
        dpModalTopOffset = fieldPositionTop - 255;
    } else if (refDatePicker.hasClass('datepicker-orient-bottom')) {
        dpModalTopOffset = fieldPositionTop + 30;
    }

    refDatePicker.css({ "top": dpModalTopOffset }); 
});