MVC5 Bootstrap Datetimepicker CSS格式不正确

Question

我目前正在为我的MVC5项目添加datetimepicker。 我决定使用Eonasdan的Bootstrap.v3.datetimepicker。 现在，我可以在某种程度上使用它了，但是格式不正确。 未选择当前日期，月/年未居中对齐，时间图标也未居中对齐。 另外，当尝试更改月份/年份时，月份/年份全部显示在一行上。

它必须与CSS相关，但是，我不知道如何解决它。 有人遇到过同样的问题并解决了吗？

bundleconfig.cs

        public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        bundles.Add(new ScriptBundle("~/bundles/datetime").Include(
            "~/Scripts/moment*",
            "~/Scripts/bootstrap-datetimepicker*"));

        //         // Use the development version of Modernizr to develop with and learn from. Then, when you're
        //         // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        //         bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
        //                     "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));

                 bundles.Add(new ScriptBundle("~/bundles/jqueryui")
        .Include("~/Scripts/jquery-ui-{version}.js"));

                 bundles.Add(new StyleBundle("~/Content/jqueryui")
                    .Include("~/Content/themes/base/all.css"));

    }

_Layout.cshtml

...
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/datetime")
@RenderSection("scripts", required: false)
</body>
</html>

Create.cshtml-控件

        <div class="form-group">
        @Html.LabelFor(model => model.Check_Date, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Check_Date, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Check_Date, "", new { @class = "text-danger" })
        </div>
    </div>

Create.cshtml-脚本

@section scripts {
<script type="text/javascript">
  $(function () {
  $('#Check_Date').datetimepicker({
    defaultDate: '@DateTime.Now',
    locale: 'en',
    widgetPositioning: {
        vertical: 'bottom',
        horizontal: 'left'
    }
});
});
</script>
}

Answer 1

您可能错过了bootstrap-datetimepicker.css 。

请参考以下链接： 按照GitHub链接-作者： Eonasdan