剃刀页DateTime输入大小不正确

Question

我正在将Razor Pages和Asp.Net Core 2.2与Bootstrap 4.3.1一起使用。网站上没有自定义CSS。我只是在Visual Studio 2019中通过选择文件\新项目创建了它

我的cshtml中包含以下内容：

<form sp-page="./Index" method="get">
            <h5 class="card-title">Select Criteria</h5>
            <div class="container">
                <div class="row">
                    <div class="col">
                        <input asp-for="@Model.PageFilter.SearchFields.SearchFromDate" />
                        <input asp-for="@Model.PageFilter.SearchFields.SearchFromDateState" />
                    </div>

这在浏览器中呈现如下：

我想修复以下问题：

1. 减小日期时间输入框的宽度。

   1. 以秒的粗细字体显示与其余文本相同的时间。
   2. 在输入框旁边具有日期时间输入显示复选框。

我为此在https://jsfiddle.net/BizTalkers/12m38bs0/1/

上创建了一个jsfiddle。

有人可以建议如何做到吗？

Answer 1

在日期时间输入框中添加最大宽度应该可以解决问题1和3。我在浏览器中看不到问题2。

<input type="datetime-local" data-val="true" data-val-required="The SearchFromDate field is required." id="PageFilter_SearchFields_SearchFromDate" name="PageFilter.SearchFields.SearchFromDate" value="2019-05-17T16:54:03" style="max-width:180px">