html - Razor 标签上的文本框重叠

Question

我有一个表单，Publish_Date_From 字段和 Publish_Date_To 字段文本框在它们的标签上重叠

喜欢下面的图片

这是上一节的相关代码片段

<div class="row">
    <div class="col-xs-6">
        <div class="form-group">
            @Html.LabelFor(m => m.Publish_Date_From, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(m => m.Publish_Date_From, new { @class = "form-control datepicker", placeholder = "YYYY/MM/DD", maxlength = "50" })
                @Html.ValidationMessageFor(model => model.Publish_Date_From, "", new { @class = "text-danger" })
            </div>
        </div>
        </div>

        <div class="col-xs-6">
            <div class="form-group">
                @Html.LabelFor(m => m.Publish_Date_To, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.TextBoxFor(m => m.Publish_Date_To, new { @class = "form-control datepicker", placeholder = "YYYY/MM/DD", maxlength = "50" })
                    @Html.ValidationMessageFor(model => model.Publish_Date_To, "", new { @class = "text-danger" })
                </div>
            </div>            
         </div>
</div>

如何正确对齐它们？

Answer 1

试试这个:

<div class="row">
<div class="col-xs-6">
    <div class="form-group">
        @Html.LabelFor(m => m.Publish_Date_From, htmlAttributes: new { @class = "control-label col-xs-6" })
        <div class="col-xs-6">
            @Html.TextBoxFor(m => m.Publish_Date_From, new { @class = "form-control datepicker", placeholder = "YYYY/MM/DD", maxlength = "50" })
            @Html.ValidationMessageFor(model => model.Publish_Date_From, "", new { @class = "text-danger" })
        </div>
    </div>
    </div>

    <div class="col-xs-6">
        <div class="form-group">
            @Html.LabelFor(m => m.Publish_Date_To, htmlAttributes: new { @class = "control-label col-xs-6" })
            <div class="col-xs-6">
                @Html.TextBoxFor(m => m.Publish_Date_To, new { @class = "form-control datepicker", placeholder = "YYYY/MM/DD", maxlength = "50" })
                @Html.ValidationMessageFor(model => model.Publish_Date_To, "", new { @class = "text-danger" })
            </div>
        </div>            
     </div>

或者这个:

<div class="row">
 <div class="col-xs-6">
  <div class="form-group">
   <div class="col-xs-6">
    @Html.LabelFor(m => m.Publish_Date_From, htmlAttributes: new { @class = "control-label" })
   </div>            
    <div class="col-xs-6">
      @Html.TextBoxFor(m => m.Publish_Date_From, new { @class = "form-control datepicker", placeholder = "YYYY/MM/DD", maxlength = "50" })
      @Html.ValidationMessageFor(model => model.Publish_Date_From, "", new { @class = "text-danger" })
    </div>
   </div>
 </div>
</div>