Question

在我的约会时间选择器中，我在图片中看到了空白，我该如何解决？我正在使用.Net MVC。使用bootstrap v3.3.7和Bootstrap.v3.Datetimepicker.CSS 4.17.45。

差距图：

这是BundleConfig.cs

  bundles.Add(new ScriptBundle("~/bundles/lib").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/bootstrap.js",
                    "~/Scripts/datatables/jquery.datatables.js",
                    "~/Scripts/datatables/dataTables.bootstrap.js",
                     "~/Scripts/moment.js",
                     "~/Scripts/bootstrap-datetimepicker.js",
                    "~/Scripts/bootbox.js"));

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

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



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

这是_layout.cshtml

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">   
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/lib")
@RenderSection("scripts", required: false)
</head>

这是视图中的DatePicker HTML

<div class="container">
<div class='col-md-4'>
    <div class="form-group">
        <div class='input-group date' id='datetimepicker6'>
            <input type='text' class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>
<div class='col-md-4'>
    <div class="form-group">
        <div class='input-group date' id='datetimepicker7'>
            <input type='text' class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>
</div>

这是视图中的脚本

 $(document).ready(function () {
        $('#datetimepicker6').datetimepicker();
        $('#datetimepicker7').datetimepicker({
            useCurrent: false //Important! See issue #1075
        });
        $("#datetimepicker6").on("dp.change", function (e) {
            $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker7").on("dp.change", function (e) {
            $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
        });
 });

先谢谢了。编辑：我忘记了要注意的是，单击日历图标会起作用，并且弹出对话框的格式正确。 Edit2：这是CSS的链接。

https://bootswatch.com/3/united/bootstrap.css

当我从_layout.cshtml中删除渲染并插入休闲效果时，事情总是很有趣。我不知道有人有想法吗。

<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript" src="/scripts/moment.js"></script>
<script type="text/javascript" src="/scripts/bootstrap.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-datetimepicker.js"> 
</script>
<link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />
<link rel="stylesheet" href="/Content/bootstrap.css" />

Answer 1

如果您使用的是自动添加到Visual Studio样式中的默认Site.css，请删除：

input,
select,
textarea {
    max-width: 280px;
}

该css文件中的

，因为设置输入的最大宽度与（覆盖）引导css冲突。可能更好的是，完全删除Site.css文件，以避免其他冲突。

日历图标和文本字段之间的Bootstrap日期时间选择器

1 个答案: