日历图标和文本字段之间的引导日期时间选择器间隙答案

【问题标题】：Bootstrap Date Time Picker Gap between the calendar icon and the text field日历图标和文本字段之间的引导日期时间选择器间隙
【发布时间】：2019-01-25 09:00:05
【问题描述】：

在我的日期时间选择器中，我有一个如图所示的间隙，我该如何解决这个问题？我正在使用.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" />

【问题讨论】：

你有可以发布的 CSS 文件吗？
我已经发布了
当我从 bundle config 评论 site.css 时，差距消失了。当我删除 site.css 的内容时，差距仍然存在。再次不确定为什么会这样。
你没有提供 CSS，你已经提供了 CSS 文件的标签。您最好的选择是使用所有适当的 CSS 链接/文件来重现代码，以便有人可以查看它并检查代码。否则它要求我们进行猜测。

标签： .net asp.net-mvc model-view-controller twitter-bootstrap-3 asp.net-mvc-5

【解决方案1】：

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

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

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

【讨论】：

当我删除这些行时，差距仍然存在。哎呀，即使我删除了整个文件的内容，差距仍然存在。只要有对 site.css 的引用，差距就会一直存在。
删除所有对 Site.css 的引用（包括任何捆绑），重建应用程序并使用 shift+f5 刷新页面以重新加载页面并清除浏览器缓存（查看 stackoverflow.com/a /20569488/5957979 用于其他方式，如果这不起作用）。如果这不起作用，请使用浏览器的检查器查看是否有任何其他 css 影响了那些冲突的元素。