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