Css JQuery UI日期选择器未显示在引导卡中

我已经创建了一个Bootstrap4站点。我用引导卡将一些问题分组进行调查。一个这样的问题需要一个日期响应，所以我展示了一个jQueryUIDatePicker，但是当选中它时，它不会出现

我在卡外的一个测试字段上添加了第二个日期选择器，它显示得很好。此外，如果我“检查元素”并单击输入字段，我可以看到日历控件，我可以看到“显示：无”被更改为“显示：块”，因此所有显示都正常工作，只是不显示。我尝试过将z-index改为1060（这个问题显然修复了它在Modals中的显示，但没有效果）

有什么建议吗

卡片：

<div class="card card-default">
        <div class="card-header">
            <div class="card-title"><strong>2</strong> - Farm Resources</div>
        </div>
        <div class="card-wrapper">
            <div class="card-body">
                <div class="">

                    <div class="card-title"><strong>Q4</strong> - When did you last soil sample?</div>
                    <div class="input-group col-md-4 mb-3">

                        <input type="text" class="form-control hasDatepicker" id="validationCustomUsername">
                        <div class="input-group-append">
                            <span class="input-group-text" id="inputGroupPrepend"><i class="far fa-calendar-alt"></i></span>
                        </div>
                    </div>

                    <div class="card-title"><strong>Q5</strong> - How often on average are the fields soil sampled?</div>
                    <div class="col-md-4 mb-3">
                        <div class="form-check radio radio-primary">
                            <input class="form-check-input" type="radio" name="Q5" id="Q5_1" value="option1" checked="">
                            <label class="form-check-label" for="Q5_1">
                                0-3 years
                            </label>
                        </div>
                        <div class="form-check radio radio-primary">
                            <input class="form-check-input" type="radio" name="Q5" id="Q5_2" value="option2" checked="">
                            <label class="form-check-label" for="Q5_2">
                                3-6 years
                            </label>
                        </div>
                        <div class="form-check radio radio-primary">
                            <input class="form-check-input" type="radio" name="Q5" id="Q5_3" value="option3" checked="">
                            <label class="form-check-label" for="Q5_3">
                                6-10 years
                            </label>
                        </div>
                        <div class="form-check radio radio-primary">
                            <input class="form-check-input" type="radio" name="Q5" id="Q5_4" value="option4" checked="">
                            <label class="form-check-label" for="Q5_4">
                                10 years+
                            </label>
                        </div>
                    </div>

                    <div class="card-title"><strong>Q6</strong> - A question requiring selection from a dropdown?</div>
                    <div class="input-group col-md-4 mb-3">

                        <div class="form-group">
                            <select class="form-control" id="exampleFormControlSelect1">
                                <option>Please select</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                    </div>

                    <div class="card-title"><strong>Q7</strong> - Question with a slider?</div>
                    <div class="input-group col-md-4 mb-3">

                        <label for="amount">
                            Selected value:
                            <input type="text" id="amount" readonly="" style="border:0; color:#f6931f; font-weight:bold;width:50px;">
                        </label>
                        <div id="slider" style="width:100%;" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 20%;"></span></div>
                    </div>
                </div>
            </div>
        </div>



    </div>

卡的样式（应为引导默认值）

---

从输入中删除类

hasDatepicker

。该类在初始化后由jqueryui添加。在日期选择器初始化之前自己添加它会把事情搞砸

$（函数（）{
$（“#validationCustomUsername”）.datepicker（）；
$（“#日期”）.datepicker（）；
});
.card{
位置：相对位置；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
最小宽度：0；
单词包装：打断单词；
背景色：#fff；
背景剪辑：边框框；
边框：1px实心rgba（0,0,0,0.125）；
边界半径：0.25雷姆；
}

2-农场资源
Q4-上次土壤取样是什么时候？
Q5-平均多久对田地进行一次土壤取样？
0-3年
3-6年
6-10年
十年+
Q6-需要从下拉列表中选择的问题？
请选择
1.
2.
3.
4.
5.
Q7-带滑块的问题？
选定值：
抱歉，我没有澄清-这是浏览器中呈现的html-即在jquery完成其工作并添加了
hasDatepicker
类之后。然而，我注意到它在你的代码片段中起作用，所以我的CSS中有一些东西在我发布的内容之外混乱了，我猜？是的，那一定是其他东西。我对你的代码所做的就是删除那个类。我假设您导入了所有正确的库，因为您的日期选择器在其他地方工作。在结束之前，实际的下拉菜单应该被附加到DOM的底部，检查并确保它在那里，并查看当您单击输入时它的内联样式是否发生了变化！具有讽刺意味的是，我不能同意这是一个答案；对不起，我无法控制。
$(function () {
    $("#validationCustomUsername").datepicker();

    $("#Date").datepicker();
});

.card {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}