时间戳

首页 > 解决方案 > Bootstrap 4 中的控制对齐

asp.net-mvc - Bootstrap 4 中的控制对齐

问题描述

我正在尝试学习 MVC。脱离 Visual Studio 所做的脚手架，一切都运行良好。但是当更新到 Bootstrap 4 时，我的所有控件都在视图中打乱了。我设法按照 getbootstrap.com 迁移步骤解决了其中大部分问题，但仍有一些问题 在此处输入图像描述

可见，Country DropDown 和 DatePicker 没有到位。这是我的视图代码：

  <div class="input-group" id="Country">
     @Html.LabelFor(model => model.IDCountry, htmlAttributes: new { @class = "col-md-4 col-lg-4 text-right" })
     <div class="col-md-6 col-lg-6">
        @Html.DropDownListFor(model => model.IDCountry, new SelectList(Country.List(), "Key", "Value"), new { style = "height: 30px" })
        @Html.ValidationMessageFor(model => model.IDCountry, "", new { @class = "text-danger" })
     </div>
  </div>
  <br />


  <div class="form-group">
     @Html.LabelFor(model => model.HolidayDate, htmlAttributes: new { @class = "col-md-4 col-lg-4" })
     <div class="col-md-8 col-lg-8">
        @Html.EditorFor(model => model.HolidayDate, new { autocomplete = "off" })
        @Html.ValidationMessageFor(model => model.HolidayDate, "", new { @class = "text-danger" })
     </div>
  </div>

全部包装在一个表单中 class="form-inline"

一切都在列中，以 Xl 大小运行，所以，我不知道提前感谢您的帮助

编辑：视图的完整代码

 @model Trevo.Models.Holidays

@{
   ViewBag.Title = "Edit";
}

@*<link rel="stylesheet" href="~/Content/themes/base/jquery-ui.css" />*@

<h2>Edit</h2>

@using (Html.BeginForm())
{
   @Html.AntiForgeryToken()

   <form class="form-inline">
      <h4>Holidays</h4>
      <hr />
      @Html.ValidationSummary(true, "", new { @class = "text-danger" })

      @* To enable or disable the country list *@
      <script type="text/javascript">
         function ShowHideCountry(SelectGlobal) {
            var dvCountry = document.getElementById("Country");
            dvCountry.style.display = SelectGlobal.checked ? "none" : "block";
         }
      </script>

      <div class="input-group" id="IsGlobal">
         @Html.LabelFor(model => model.IsGlobal, htmlAttributes: new { @class = "col-md-4 col-lg-4 text-right", style = "display: inline-block" })
         <div class="col-md-6 col-lg-6">
            @Html.CheckBoxFor(model => model.IsGlobal, new { id = "SelectGlobal", onclick = "ShowHideCountry(this)", style = "width:18px;height:18px;display: inline-block" })
            @Html.ValidationMessageFor(model => model.IsGlobal, "", new { @class = "text-danger" })
         </div>
      </div>
      <br />

      <div class="input-group col-md-3 col-lg-3" id="Country">
         @Html.LabelFor(model => model.IDCountry, htmlAttributes: new { @class = "col-md-4 col-lg-4 text-right" })
         <div class="col-md-6 col-lg-6">
            @Html.DropDownListFor(model => model.IDCountry, new SelectList(Country.List(), "Key", "Value"), new { style = "height: 30px" })
            @Html.ValidationMessageFor(model => model.IDCountry, "", new { @class = "text-danger" })
         </div>
      </div>
      <br />

      @Html.HiddenFor(model => model.IDHoliday)

      @*<div class="input-group" id="HolidayDate">
            @Html.LabelFor(model => model.HolidayDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-6 col-lg-6">
               @Html.EditorFor(model => model.HolidayDate, new { autocomplete = "off" })
               @Html.ValidationMessageFor(model => model.HolidayDate, "", new { @class = "text-danger" })
            </div>
         </div>
         <br />*@

      <div class="form-group">
         @Html.LabelFor(model => model.HolidayDate, htmlAttributes: new { @class = "col-md-4 col-lg-4 text-right" })
         <div class="col-md-8 col-lg-8">
            @Html.EditorFor(model => model.HolidayDate, new { autocomplete = "off" })
            @Html.ValidationMessageFor(model => model.HolidayDate, "", new { @class = "text-danger" })
         </div>
      </div>

      <div class="input-group" id="Annual">
         @Html.LabelFor(model => model.Annual, htmlAttributes: new { @class = "col-md-4 col-lg-4 text-right" })
         <div class="col-md-6 col-lg-6">
            @Html.DropDownListFor(model => model.Annual, new[] { new SelectListItem { Text = "No", Value = "0" }, new SelectListItem { Text = "Yes", Value = "1" } }, new { style = "height: 30px" })
            @Html.ValidationMessageFor(model => model.Annual, "", new { @class = "text-danger" })
         </div>
      </div>
      <br />

      <div class="input-group" id="Name">
         @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "col-md-4 col-lg-4 text-right" })
         <div class="col-md-6 col-lg-6">
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
         </div>
      </div>
      <br />

      <div class="input-group" id="Workable">
         @Html.LabelFor(model => model.Workable, htmlAttributes: new { @class = "col-md-4 col-lg-4 text-right" })
         <div class="col-md-6 col-lg-6">
            @Html.DropDownListFor(model => model.Workable, new[] { new SelectListItem { Text = "No", Value = "0" }, new SelectListItem { Text = "Yes", Value = "1" } }, new { style = "height: 30px" })
            @Html.ValidationMessageFor(model => model.Workable, "", new { @class = "text-danger" })
         </div>
      </div>

      <div class="col text-center">
         <input type="submit" value="Save" class="btn btn-primary" />
      </div>
      <hr />

   </form>
}

<div>
   <div class="row">
      <div class="col text-right">
         @Html.ActionLink("Back to List", "Index", null, new { @class = "btn btn-success" })
      </div>
   </div>
</div>

@section Scripts {
   @Scripts.Render("~/bundles/jqueryval")

   @* To enable or disable the country list on Page load *@
   <script type="text/javascript">
      $(document).ready(function () {
         var dvCountry = document.getElementById("Country");
         dvCountry.style.display = SelectGlobal.checked ? "none" : "block";
      });
   </script>

   @* DateTime picker *@
   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   <script src="~/Scripts/jquery.maskedinput.min.js"></script>
   <script>
      $("#HolidayDate").datepicker({ dateFormat: "dd/mm/yy" }).mask("99/99/9999");
      $.validator.addMethod('date',
         function (value, element, params) {
            if (this.optional(element)) {
               return true;
            }
            var ok = true;
            try {
               $.datepicker.parseDate('dd/mm/yy', value);
            }
            catch (err) {
               ok = false;
            }
            return ok;
         });
   </script>
}

标签： asp.net-mvcbootstrap-4

解决方案

您需要进行以下两项更改才能使其正常工作：

col-md-3 col-lg-3从 IDCountry 组中删除：

<div class="input-group col-md-3 col-lg-3" id="Country">

应该：

<div class="input-group" id="Country">

将 HolidayDate 组从更改form-group为input-group

<div class="form-group">
@Html.LabelFor(model => model.HolidayDate, htm...

应该：

<div class="input-group">
@Html.LabelFor(model => model.HolidayDate, htm...

推荐阅读