javascript - Bootstrap datetimepicker CSS 问题

Question

我正在尝试使用 bootstrap datetimepicker在 ASP.NET 应用程序上。不过，我遇到了一些奇怪的 CSS 问题。这是它的样子:

可以看到，图标设置在最右边，背景是蓝色的，光标所到之处都有一个黑框。这些是我在我的网页上使用的文件:

<link href="~/Content/Style.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="~/Scripts/umd/popper.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-multiselect.js"></script>
<link href="~/Content/bootstrap-multiselect.css" rel="stylesheet"type="text/css" />
<link rel="stylesheet" href="~/Content/bootstrap.min.css" />
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<script src="~/Scripts/Chart.js"></script>
<link rel="stylesheet" href="~/Content/bootstrap-datepicker.css" />
<link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />

这就是我使用 datetimepicker 的 html/js 的样子(代码直接来自他们的网站)。

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

我导入这些文件或 CSS 文件的方式是否有问题？

谢谢!

Answer 1

有些css文件好像有冲突，可以看看是哪些css文件影响了datetimepicker的输入框长度和鼠标悬停效果。 Bootstrap 版本可能会影响这些问题。