使用 bootstrap-4 将 timepicker 包含到表中答案

【问题标题】：Include timepicker into table with bootstrap-4使用 bootstrap-4 将 timepicker 包含到表中
【发布时间】：2019-03-06 08:43:57
【问题描述】：

我正在尝试使用 JS 库 bootstrap-4.min.js 和 moments-with-locales.min.js 将 timlepicker 添加到 html 表中.

为此，我有一个带有 timepicker 输入的 html 表，这是我的项目：https://jsfiddle.net/Geo_x/fv0oqdpx/12/

问题是我的时间选择器不在我的桌子上，而是在我的桌子上：

我尝试了position:relative 和其他选项，但并不成功。

你能帮帮我吗？

谢谢。

【问题讨论】：

标签： jquery css bootstrap-4 momentjs datetimepicker

【解决方案1】：

对这个类使用position:absolute.bootstrap-datetimepicker-widget

.bootstrap-datetimepicker-widget{
  background-color:green;
  position:absolute;
}

查看更新的fiddle here

【讨论】：

【解决方案2】：

我只编写了一个不需要包含“位置：绝对；”的 HTML 代码 sn-p CSS 属性并使您的 DateTimePicker 更具可读性 - 您拥有的那个在背景中是绿色的，带有项目符号，没有任何可见的递增和递减箭头。我的 sn-p 还包括一个可点击的日历图标。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js">       </script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<table class="contenu_popup">
  <col width=auto><col width=auto>
  <tr>
    <td id="test1">test line 1</td>
    <td><input type="text"/></td>
  </tr>
  <tr>
    <td id="test">TimePicker test</td>
    <td>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <div class='input-group date' id='datetimepicker3' style="margin-top:  5px">
          <input type='text' class="form-control"/>
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div></td>
  </tr>
  <tr>
    <td id="test2">test line 3</td>
    <td><input type="text"/></td>
  </tr>
</table>

【讨论】：