datetimepicker 组件不在正确的位置答案

【问题标题】：datetimepicker component not in right placedatetimepicker 组件不在正确的位置
【发布时间】：2015-02-03 07:58:49
【问题描述】：

我想使用 bootstrap 中的 datetimepicker，所以我按照此站点中的手动安装指南进行操作 bootstrap-datetimepicker 但我有以下错误：

未捕获的错误：datetimepicker 组件应放置在相对定位的容器中。

如何解决？

<div class="control-group form-horizontal ">
  <label class="control-label">Date</label>
  <div class="controls">
    <input name="datetime" id="datetimepicker4" type="text" class="span4" value="<?php echo $datetime; ?>">
  </div>
</div>

<script type="text/javascript">
  $(function() {
    $('#datetimepicker4').datetimepicker();
  });
</script>

感谢您的回复...

【问题讨论】：

你能发布你的问题的 jsfiddle 吗？你用的是BS2还是BS3？

标签： twitter-bootstrap bootstrap-datetimepicker

【解决方案1】：

我遇到了同样的问题，我的解决方法是为我的日期时间控件添加新类，并为它添加 position: relative 属性的选择器：

<style>
  .editor-datetime {
      position: relative;
   }
</style>

<div class="editor-datetime">
  @Html.EditorFor(i => i.StartDate)
</div>

希望这会有所帮助！

【讨论】：

【解决方案2】：

我也有同样的问题。

我通过添加相对于包装 div 的位置来修复它，如下所示：

<div class="control-group form-horizontal ">
       <label class="control-label">Date</label>
              <div class="controls" style="position: relative">
                 <input name="datetime" id="datetimepicker4" type="text"  class="span4" value="<?php echo $datetime; ?>" >
                                </div>
                            </div>
<script type="text/javascript">
        $(function () { 
            $('#datetimepicker4').datetimepicker();
        });
    </script>

【讨论】：

这个解决方案对我来说效果很好。

【解决方案3】：

你需要一个围绕控件的容器 div

<body>
   <div class="container">
      <div class="row">
          <div class="col-md-6">
              your code snippet here
          </div>
      </div>
   </div>
</body>

【讨论】：

我试过了，但没有什么可以改变的。我认为那行不通。

【解决方案4】：

您正在使用 bootstrap2，请尝试使用其他支持 bootstrap2 的 datetimepicker，即http://tarruda.github.io/bootstrap-datetimepicker/，似乎http://eonasdan.github.io/bootstrap-datetimepicker/ 仅适用于 bootstrap3。

【讨论】：