使用引导程序删除两列之间的空间
[英]Removing Space Between two Columns In form with bootstrap
问题描述
Good day guys,
美好的一天，伙计们，
I have a form with code below using the ASP.NET MVC and the bootsrap.我有一个表格，下面使用 ASP.NET MVC 和 bootsrap 代码。 There are two columns and each column contains like 7 items.有两列，每列包含大约 7 个项目。 The space in between the two columns is too wide and makes it not well arranged.两列之间的空间太宽，排列得不好。 Can anyone help please.任何人都可以帮忙吗？ Below is the source code.下面是源代码。
I will attach the output as well.我也会附上 output。 I expect the output to not have that big space in between the columns.我希望 output 在列之间没有那么大的空间。
Thank you for the anticipated assistance.感谢您的预期帮助。 enter image description here在此处输入图像描述
@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>
}
3 个解决方案
解决方案1
0 2020-07-04 08:58:08
remove class="row" for this parent div.
删除此父 div 的 class="row"。
with no class test then try use class "container" or "container-fluid" instead
没有 class 测试然后尝试使用 class “容器”或“容器流体”代替
删除此父 div 的 class="row"。
with no class test then try use class "container" or "container-fluid" instead
没有 class 测试然后尝试使用 class “容器”或“容器流体”代替
and put style for your other two cols: style="float:right";并为您的其他两个 cols 设置样式： style="float:right"; col1 style="float left"; col1 style="向左浮动"; col2 col2
try this.尝试这个。
解决方案2
0 2020-07-04 09:19:28
You can use the grid features of bootstrap.您可以使用引导程序的网格功能。 Something like:就像是：
<div class="container">
<div class="row">
<div class="col-md-6">
<form>[...]</form>
</div>
<div class="col-md-6">
<form>[...]</form>
</div>
</div>
</div>
Try this code:试试这个代码：
@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>
}
解决方案3
0 2020-07-30 10:56:49
In Bootstrap 4 you can use form-row to get a closer column layout like:在 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>
Keep on repeating the div structure from <div class="form-row"> till you complete all rows.继续从<div class="form-row">重复 div 结构，直到完成所有行。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
引导程序中两列表单之间的多余空间 - Unwanted space between two columns of form in bootstrap
Bootstrap窗体上两个按钮之间的空间 - Space between two buttons on a Bootstrap form
删除第一列，最后一列之前和列之间的Bootstrap空间 - Removing Bootstrap space before first column, last column and between columns
引导列之间的空间 - Space between bootstrap columns
删除Bootstrap 3选项卡之间的空间 - Removing space between Bootstrap 3 tabs
删除引导元素之间的空间 - Removing space between bootstrap elements
删除3个HTML列之间的空格 - Removing space between 3 HTML columns
如何使用Bootstrap减少两列之间的空间 - How to reduce too much space between two columns with Bootstrap
如何在Bootstrap中的不同列中删除两个div之间的空间 - how remove space between two div in different columns in Bootstrap
引导程序在列之间添加空间 - Bootstrap Add Space between Columns
相关标签