html - 使用引导程序删除两列之间的空间

Question

美好的一天，伙计们，

我有一个使用 ASP.NET MVC 和 bootsrap 的带有以下代码的表单。有两列，每列包含大约 7 个项目。两列之间的空间太宽，排列得不好。任何人都可以帮忙吗？下面是源代码。

我也会附上输出。我希望输出在列之间没有那么大的空间。

感谢您的预期帮助。在此处输入图像描述

@model CreditFacility_Web.Models.CreditFacilityModel.SavingsAccount
<div class="w3-container" style="padding-left:100px">
@{
    ViewBag.Title = "Edit Savings Account";
}

<h2>Edit Savings Account</h2>
<div class="row">

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

        <div class="form-horizontal">

            <hr />
            <div class="row">
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                @Html.HiddenFor(model => model.Id)
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Account_Number, new { htmlAttributes =      new { placeholder = "Account Number", @class = "form-control", @readonly = "true" } })
                            @Html.ValidationMessageFor(model => model.Account_Number, "", new {   @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.DropDownList("Title", new List<SelectListItem>{
                        new SelectListItem{ Text="Mr", Value="Mr"},
                        new SelectListItem{ Text="Mrs", Value="Mrs"},
                        new SelectListItem{ Text="Dr", Value="Dr"},
                        new SelectListItem{ Text="Chief", Value="Chief"},
                        new SelectListItem{ Text="Miss", Value="Miss"}
                        }, "--- Select Title ---", new { @class = "form-control" }
                        )
                            @Html.ValidationMessageFor(model => model.Title, "", new { @class =   "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Firstname, new { htmlAttributes = new   { placeholder = "Firstname", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Firstname, "", new { @class   = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Othername, new { htmlAttributes = new   { placeholder = "Othername", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Othername, "", new { @class   = "text-danger" })
                        </div>
                    </div>


                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Surname, new { htmlAttributes = new { placeholder = "Surname", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Surname, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Phone_Number, new { htmlAttributes = new { placeholder = "Phone Number", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Phone_Number, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.BVN, new { htmlAttributes = new { placeholder = "Customer BVN", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.BVN, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Contact_Address, new { htmlAttributes = new { placeholder = "Contact Address", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Contact_Address, "", new {  @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.DropDownList("Gender", new List<SelectListItem>{
                        new SelectListItem{ Text="Male", Value="Male"},
                        new SelectListItem{ Text="Female", Value="Female"}

                        }, "--- Select Gender ---", new { @class = "form-control" }
                        )
                            @Html.ValidationMessageFor(model => model.Gender, "", new { @class = "text-danger" })
                        </div>
                    </div>



                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.DOB, new { htmlAttributes = new { placeholder = "Date Of Birth", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.DOB, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.DropDownList("State_Of_Origin", new List<SelectListItem>{
                        new SelectListItem{ Text="Abia State", Value="Abia State"},
                        new SelectListItem{ Text="Adamawa State", Value="Adamawa State"},
                        new SelectListItem{ Text="Akwa Ibom State", Value="Akwa Ibom State"},
                        new SelectListItem{ Text="Anambra State", Value="Anambra State"},
                        new SelectListItem{ Text="Bauchi State", Value="Bauchi State"},
                        new SelectListItem{ Text="Bayelsa State", Value="Bayelsa State"},
                        new SelectListItem{ Text="Benue State", Value="Benue State"},
                        new SelectListItem{ Text="Borno State", Value="Borno State"},
                        new SelectListItem{ Text="Cross River State", Value="Cross River State"},
                        new SelectListItem{ Text="Delta State", Value="Delta State"},
                       new SelectListItem{ Text="Ebonyi  State", Value="Ebonyi  State"},
                        new SelectListItem{ Text="Edo State", Value="Edo State"},
                        new SelectListItem{ Text="Ekiti State", Value="Ekiti State"},
                        new SelectListItem{ Text="Enugu State", Value="Enugu State"},
                        new SelectListItem{ Text="Gombe State", Value="Gombe State"},
                        new SelectListItem{ Text="Imo State", Value="Imo State"},
                        new SelectListItem{ Text="Jigawa State", Value="Jigawa State"},
                        new SelectListItem{ Text="Kaduna State", Value="Kaduna State"},
                        new SelectListItem{ Text="Kano State", Value="Kano State"},
                        new SelectListItem{ Text="Katsina State", Value="Katsina State"},
                        new SelectListItem{ Text="Kebbi State", Value="Kebbi State"},
                        new SelectListItem{ Text="Kogi State", Value="Kogi State"},
                       new SelectListItem{ Text="Kwara State", Value="Kwara State"},
                        new SelectListItem{ Text="Lagos State", Value="Lagos State"},
                        new SelectListItem{ Text="Nasarawa State", Value="Nasarawa State"},
                        new SelectListItem{ Text="Niger State", Value="Niger State"},
                        new SelectListItem{ Text="Ogun State", Value="Ogun State"},
                        new SelectListItem{ Text="Ondo State", Value="Ondo State"},
                        new SelectListItem{ Text="Osun State", Value="Osun State"},
                        new SelectListItem{ Text="Oyo State", Value="Oyo State"},
                        new SelectListItem{ Text="Plateau State", Value="Plateau State"},
                        new SelectListItem{ Text="Rivers State", Value="Rivers State"},
                        new SelectListItem{ Text="Sokoto State", Value="Sokoto State"},
                        new SelectListItem{ Text="Taraba State", Value="Taraba State"},
                        new SelectListItem{ Text="Yobe State", Value="Yobe State"},
                        new SelectListItem{ Text="Zamfara State", Value="Zamfara State"},
                        new SelectListItem{ Text="FCT", Value="FCT"}

                       }, "--- Select State Of Origin ---", new { @class = "form-control" }
                        )
                            @Html.ValidationMessageFor(model => model.State_Of_Origin, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Email_Address, new { htmlAttributes = new { placeholder = "Email Address", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Email_Address, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Next_Of_Kin, new { htmlAttributes = new { placeholder = "Next Of Kin Name", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Next_Of_Kin, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.NOK_Phone, new { htmlAttributes = new { placeholder = "Next Of Kin Phone", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.NOK_Phone, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Account_Type, new { htmlAttributes = new { placeholder = "Account Type", @class = "form-control", @readonly = "true" } })
                            @Html.ValidationMessageFor(model => model.Account_Type, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Account_Balance, new { htmlAttributes = new { placeholder = "Account Balance", @class = "form-control", @readonly = "true" } })
                            @Html.ValidationMessageFor(model => model.Account_Balance, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Date_Opened, new { htmlAttributes = new { placeholder = "Date Opened", @class = "form-control", @readonly = "true" } })
                            @Html.ValidationMessageFor(model => model.Date_Opened, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Opened_By, new { htmlAttributes = new { placeholder = "Opened By", @class = "form-control", @readonly = "true" } })
                            @Html.ValidationMessageFor(model => model.Opened_By, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <input type="submit" value="Save" class="btn btn-success btn-block" />
                        </div>
                    </div>


                </div>
            </div>



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

@section Scripts {

@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/cssjqryUi")

<script type="text/javascript">

    $(document).ready(function () {
        $('input[type=datetime]').datepicker({
            dateFormat: "dd/M/yy",
            changeMonth: true,
            changeYear: true,
            yearRange: "-60:+0"
        });

    });
</script>
} 

Answer 1

删除此父 div 的 class="row"。没有类测试然后尝试使用类“container”或“container-fluid”

并为其他两个 cols 设置样式： style="float:right"; col1 style="向左浮动"; col2

尝试这个。

Answer 2

您可以使用引导程序的网格功能。就像是：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <form>[...]</form>
    </div>
    <div class="col-md-6">
      <form>[...]</form>
    </div>
  </div>
</div>

试试这个代码：

@model CreditFacility_Web.Models.CreditFacilityModel.SavingsAccount
<div class="w3-container" style="padding-left:100px">
@{
    ViewBag.Title = "Edit Savings Account";
}

<h2>Edit Savings Account</h2>
<div class="container">

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

        <div class="form-horizontal">

            <hr />
            <div class="row">
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                @Html.HiddenFor(model => model.Id)
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Account_Number, new { htmlAttributes =      new { placeholder = "Account Number", @class = "form-control", @readonly = "true" } })
                            @Html.ValidationMessageFor(model => model.Account_Number, "", new {   @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.DropDownList("Title", new List<SelectListItem>{
                        new SelectListItem{ Text="Mr", Value="Mr"},
                        new SelectListItem{ Text="Mrs", Value="Mrs"},
                        new SelectListItem{ Text="Dr", Value="Dr"},
                        new SelectListItem{ Text="Chief", Value="Chief"},
                        new SelectListItem{ Text="Miss", Value="Miss"}
                        }, "--- Select Title ---", new { @class = "form-control" }
                        )
                            @Html.ValidationMessageFor(model => model.Title, "", new { @class =   "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Firstname, new { htmlAttributes = new   { placeholder = "Firstname", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Firstname, "", new { @class   = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Othername, new { htmlAttributes = new   { placeholder = "Othername", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Othername, "", new { @class   = "text-danger" })
                        </div>
                    </div>


                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Surname, new { htmlAttributes = new { placeholder = "Surname", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Surname, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Phone_Number, new { htmlAttributes = new { placeholder = "Phone Number", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Phone_Number, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.BVN, new { htmlAttributes = new { placeholder = "Customer BVN", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.BVN, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Contact_Address, new { htmlAttributes = new { placeholder = "Contact Address", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Contact_Address, "", new {  @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.DropDownList("Gender", new List<SelectListItem>{
                        new SelectListItem{ Text="Male", Value="Male"},
                        new SelectListItem{ Text="Female", Value="Female"}

                        }, "--- Select Gender ---", new { @class = "form-control" }
                        )
                            @Html.ValidationMessageFor(model => model.Gender, "", new { @class = "text-danger" })
                        </div>
                    </div>



                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.DOB, new { htmlAttributes = new { placeholder = "Date Of Birth", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.DOB, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.DropDownList("State_Of_Origin", new List<SelectListItem>{
                        new SelectListItem{ Text="Abia State", Value="Abia State"},
                        new SelectListItem{ Text="Adamawa State", Value="Adamawa State"},
                        new SelectListItem{ Text="Akwa Ibom State", Value="Akwa Ibom State"},
                        new SelectListItem{ Text="Anambra State", Value="Anambra State"},
                        new SelectListItem{ Text="Bauchi State", Value="Bauchi State"},
                        new SelectListItem{ Text="Bayelsa State", Value="Bayelsa State"},
                        new SelectListItem{ Text="Benue State", Value="Benue State"},
                        new SelectListItem{ Text="Borno State", Value="Borno State"},
                        new SelectListItem{ Text="Cross River State", Value="Cross River State"},
                        new SelectListItem{ Text="Delta State", Value="Delta State"},
                       new SelectListItem{ Text="Ebonyi  State", Value="Ebonyi  State"},
                        new SelectListItem{ Text="Edo State", Value="Edo State"},
                        new SelectListItem{ Text="Ekiti State", Value="Ekiti State"},
                        new SelectListItem{ Text="Enugu State", Value="Enugu State"},
                        new SelectListItem{ Text="Gombe State", Value="Gombe State"},
                        new SelectListItem{ Text="Imo State", Value="Imo State"},
                        new SelectListItem{ Text="Jigawa State", Value="Jigawa State"},
                        new SelectListItem{ Text="Kaduna State", Value="Kaduna State"},
                        new SelectListItem{ Text="Kano State", Value="Kano State"},
                        new SelectListItem{ Text="Katsina State", Value="Katsina State"},
                        new SelectListItem{ Text="Kebbi State", Value="Kebbi State"},
                        new SelectListItem{ Text="Kogi State", Value="Kogi State"},
                       new SelectListItem{ Text="Kwara State", Value="Kwara State"},
                        new SelectListItem{ Text="Lagos State", Value="Lagos State"},
                        new SelectListItem{ Text="Nasarawa State", Value="Nasarawa State"},
                        new SelectListItem{ Text="Niger State", Value="Niger State"},
                        new SelectListItem{ Text="Ogun State", Value="Ogun State"},
                        new SelectListItem{ Text="Ondo State", Value="Ondo State"},
                        new SelectListItem{ Text="Osun State", Value="Osun State"},
                        new SelectListItem{ Text="Oyo State", Value="Oyo State"},
                        new SelectListItem{ Text="Plateau State", Value="Plateau State"},
                        new SelectListItem{ Text="Rivers State", Value="Rivers State"},
                        new SelectListItem{ Text="Sokoto State", Value="Sokoto State"},
                        new SelectListItem{ Text="Taraba State", Value="Taraba State"},
                        new SelectListItem{ Text="Yobe State", Value="Yobe State"},
                        new SelectListItem{ Text="Zamfara State", Value="Zamfara State"},
                        new SelectListItem{ Text="FCT", Value="FCT"}

                       }, "--- Select State Of Origin ---", new { @class = "form-control" }
                        )
                            @Html.ValidationMessageFor(model => model.State_Of_Origin, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Email_Address, new { htmlAttributes = new { placeholder = "Email Address", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Email_Address, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Next_Of_Kin, new { htmlAttributes = new { placeholder = "Next Of Kin Name", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Next_Of_Kin, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.NOK_Phone, new { htmlAttributes = new { placeholder = "Next Of Kin Phone", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.NOK_Phone, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Account_Type, new { htmlAttributes = new { placeholder = "Account Type", @class = "form-control", @readonly = "true" } })
                            @Html.ValidationMessageFor(model => model.Account_Type, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Account_Balance, new { htmlAttributes = new { placeholder = "Account Balance", @class = "form-control", @readonly = "true" } })
                            @Html.ValidationMessageFor(model => model.Account_Balance, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Date_Opened, new { htmlAttributes = new { placeholder = "Date Opened", @class = "form-control", @readonly = "true" } })
                            @Html.ValidationMessageFor(model => model.Date_Opened, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.Opened_By, new { htmlAttributes = new { placeholder = "Opened By", @class = "form-control", @readonly = "true" } })
                            @Html.ValidationMessageFor(model => model.Opened_By, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <input type="submit" value="Save" class="btn btn-success btn-block" />
                        </div>
                    </div>


                </div>
            </div>

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

@section Scripts {

@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/cssjqryUi")

<script type="text/javascript">

    $(document).ready(function () {
        $('input[type=datetime]').datepicker({
            dateFormat: "dd/M/yy",
            changeMonth: true,
            changeYear: true,
            yearRange: "-60:+0"
        });

    });
</script>
} 

Answer 3

在 Bootstrap 4 中，您可以使用form-row来获得更接近的列布局，例如：

<div class="container">
  <div class="form-row"> //First row
    <div class="form-group col"> //First column
      @Html.EditorFor(model => model.Firstname, new { htmlAttributes = new   { placeholder = "Firstname", @class = "form-control" } })
      @Html.ValidationMessageFor(model => model.Firstname, "", new { @class   = "text-danger" })
    </div>

    <div class="form-group col"> //Second column
      @Html.EditorFor(model => model.DOB, new { htmlAttributes = new { placeholder = "Date Of Birth", @class = "form-control" } })
      @Html.ValidationMessageFor(model => model.DOB, "", new { @class = "text-danger" })
    </div>
  </div>
</div>

继续重复 div 结构，<div class="form-row">直到完成所有行。