Bootstrap datetimepicker在tab-content框内部切断

Question

我正在使用eonasdan-bootstrap-datetimepicker。 请先在这里看图片：

1. datetimepicker位于Bootstrap选项卡内容控件中，并被上边距切断。
   
   没有br标签的屏幕截图
   
   

2. 一层br标签添加填充，从而允许完整的datetimepicker显示自己。
   
   包含br标签的屏幕截图
   
   

这是没有form-group下面的br标签的表单的标记：

<form class="form-horizontal mt-sm" action='' method="POST">
    <fieldset>    
        <div class="form-group">
            <label for="expiration-date" class="control-label col-md-3">Expiration Date</label>
            <div class="col-md-8">
                <div class="col-md-10"><input type="text" id="expiration-date" class="form-control"></div>
            </div>
        </div>
    </fieldset>
</form>

以下是脚本：

<script src="/lib/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="/lib/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<script src="/lib/select2/select2.min.js"></script>
<script src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />

Answer 1

问题是选项卡的z-index高于日期选择器UI。 因此，要解决此问题，您必须增加日期选择器UI的z-index。

.datepicker {
    z-index: 1151;
}

确保将选择器更改为更具体的所需.datepicker元素。 还要确保此样式优先。 在我的情况下，我不得不使用z-index: 1151 !important; 但我不推荐它，除非你能够在没有!important情况下使用它。