MVC5 Bootstrap Datetimepicker CSS 格式不正确

Question

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

肯定是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。

参考以下link： Follow the GitHub Link- By Eonasdan

MVC5 Bootstrap Datetimepicker CSS 格式不正确

MVC5 Bootstrap Datetimepicker CSS not formatting correctly

asp.net-mvc

datetimepicker

asp.net-mvc-5

twitter-bootstrap-3