Question

我无法将Bootstrap Datepicker日历锚定/弹出到条目文本框下方。有什么建议吗？

这是我的标记等：

<head>
...
    <!-- Bootstrap: Latest compiled and minified CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap: Datepicker Plugin -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css" rel="stylesheet">
...
</head>
<body>
...
<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="tour_date">Service Date</label>
<div class="input-group date col-md-2">
  <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
  <label class="col-md-2 control-label" for="tour_time">Service Time</label>
  <div class="input-group bootstrap-timepicker timepicker col-md-2">
    <input id="timepicker" type="text" class="form-control input-small" data-minute-step="30">
    <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
  </div>
  </div>
</div>
...
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- Bootstrap: Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <!-- Bootstrap: Bootstrap Datepicker Plugin -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
    <script>
      $('#tickets .input-group.date').datepicker({
        autoclose: true,
        todayHighlight: true,
        datesDisabled: ['01/01/1970', '12/31/2099']
      });
    </script>
  </body>

屏幕截图 - 我的行为

屏幕截图 - 所需行为

修改后添加了样式问题：

如何让Bootstrap Datepicker日历锚定在文本框下方

0 个答案: