Question

datepicker字段有一个extra border，它会弄乱整个视图。我找不到日历图标位于正确位置的设置（就像现在一样），并且只有一个普通的编辑器字段，与其他字段对齐。

<div class="form">
      <div class="row">
            <div class="form-group col-md-2">
                @Html.LabelFor(model => model.Destination.Country.CountryName, htmlAttributes: new { @class = "control-label col-md-2" })
                @Html.EditorFor(model => model.Destination.Country.CountryName, new { htmlAttributes = new { @class = "form-control", disabled = "disabled" } })
            </div>

            <div class="form-group col-md-2">
                @Html.LabelFor(model => model.BookingDate, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class=" input-group date form-control">
                    @Html.EditorFor(model => model.BookingDate, new { htmlAttributes = new { @class = "form-control" } })
                    <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                    @Html.ValidationMessageFor(model => model.BookingDate, "", new { @class = "text-danger" })
                </div>                
            </div>

            <div class="form-group col-md-2">
                @Html.Label("Status", htmlAttributes: new { @class = "control-label col-md-2" })
                @Html.Editor("status", null, new { htmlAttributes = new { @class = "form-control", disabled = "disabled" } })
            </div>
      </div>
</div>

导致:(对于datepicker）

<div class="form-group col-md-2">
    <label class="control-label col-md-2" for="BookingDate">BookingDate</label>
    <div class=" input-group date form-control">
        <input id="BookingDate" class="form-control text-box single-line" type="date" value="" name="BookingDate" data-val-required="The BookingDate field is required." data-val-date="The field BookingDate must be a date." data-val="true">
        <span class="input-group-addon">
        <span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="BookingDate"></span>
    </div>
</div>

Answer 1

从包含BookingDate输入的父div中删除form-control类。这解决了datepicker周围的额外边界。但是你必须做一些改变才能以适当的方式显示表格。

在Bootstrap中有三种显示表单的方法：水平，内联和使用网格系统。基于您的代码：

使用网格并排放置控件

<div class="row">
    <!-- More fields here -->
    <div class="col-md-4">
        <div class="form-group">
            @Html.LabelFor(model => model.BookingDate, htmlAttributes: new { @class = "control-label" })
            <div class="input-group date">
                @Html.EditorFor(model => model.BookingDate, new { htmlAttributes = new { @class = "form-control" } })
                <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
            </div>
            @Html.ValidationMessageFor(model => model.BookingDate, "", new { @class = "text-danger" })
        </div>
    </div>
    <!-- More fields here -->
</div>

Bootstrap DatePicker在Asp.NET MVC中有不必要的额外边框

1 个答案: