引导日期时间选择器在选项卡内容框中被切断。

Question

我在用伊诺纳斯丹-引导-日期选择器。请先看这里的图片：

1. 日期选择器位于Bootstrap选项卡内容控件中，并被上边距所切断。

无br标签的屏幕截图

​

1. 一层br标记添加填充，从而允许完整的日期选择器显示自己。

br标签的屏幕截图包括

​

下面是表单的标记，在窗体组下面没有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索引。

.datepicker {
    z-index: 1151;
}

确保将选择器更改为对所需的.datepicker元素更加具体。还要确保这种风格具有优先权。在我的例子中，我不得不使用z-index: 1151 !important;，但我不建议使用它，除非您能够在没有!important的情况下工作。