[英]Removing Space Between two Columns In form with bootstrap
美好的一天,伙計們,
我有一個表格,下面使用 ASP.NET MVC 和 bootsrap 代碼。 有兩列,每列包含大約 7 個項目。 兩列之間的空間太寬,排列得不好。 任何人都可以幫忙嗎? 下面是源代碼。
我也會附上 output。 我希望 output 在列之間沒有那么大的空間。
感謝您的預期幫助。 在此處輸入圖像描述
@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>
}
並為您的其他兩個 cols 設置樣式: style="float:right"; col1 style="向左浮動"; col2
嘗試這個。
您可以使用引導程序的網格功能。 就像是:
<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>
}
在 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 class="form-row">
重復 div 結構,直到完成所有行。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.