【发布时间】：2021-11-10 14:12:18
【问题描述】：
我有这个_Layout.cshtml 文件，它在我的应用程序中的所有视图之间共享：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - HR Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="@Url.Action("Index", "Home")" title="List View" class="links">
<img alt="List View" src="@Url.Content("~/Images/WVDOT.png")" style="width:60px; height:60px; margin-right: 10px">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("WC Inbox Forms", "Index", "WC_Inbox")</li>
<li>@Html.ActionLink("Employees", "Index", "Employees")</li>
<li>@Html.ActionLink("Archived", "Archive", "WC_Inbox")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
</body>
</html>
它提供了页面的页眉和页脚，最终看起来像这样：
然而，应用程序中的 1 个页面需要特别设置样式，所以我选择使用 flexbox 并制作了这个样式表，这使得我使用这个样式表的页面上的所有内容看起来都很棒：
.pageContainer {
display: flex;
flex-direction: column;
}
.title {
display: flex;
}
.container {
display: flex;
flex-direction: row;
justify-content: center;
}
.Info {
width: 70%;
flex-direction: column;
}
.infobox {
width: 30%;
flex-direction: column;
justify-content: center;
}
.innerBox {
display: flex;
justify-content: center;
flex-direction: column;
width: 250px;
border: 1px solid black;
background-color: lightyellow;
border-radius: 5px;
}
.title2 {
display: flex;
justify-content: center;
}
但是，自从我将 flexbox 添加到此 css 表单后，我仅在此页面上的导航栏已重新定位，同时页脚被移至页面顶部：
为什么会发生这种情况，我该如何解决？如果可能，我不希望更改布局页面，因为它已在应用程序的所有其他页面中成功使用。如果您需要，这里是有问题的创建页面（它相当长）：
@model HR_APP_V2.Models.WC_Inbox
<link href="~/Styles/FormCreate.css" rel="stylesheet" type="text/css" />
@{
ViewBag.Title = "Create";
}
<div class="pageContainer">
<h3 class="title">Create a new Injury Form for @ViewBag.Name</h3>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.Hidden("EmployeeID", (object)ViewBag.EmployeeID)
@Html.Hidden("Status", (object)ViewBag.Status)
@Html.Hidden("fullName", (object)ViewBag.Name)
<div class="container">
<div class="Info">
<div class="form-group">
@Html.LabelFor(model => model.District, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("District", new List<SelectListItem>
{
new SelectListItem {Text = "District 1", Value="1" },
new SelectListItem {Text = "District 2", Value="2" },
new SelectListItem {Text = "District 3", Value="3" },
new SelectListItem {Text = "District 4", Value="4" },
new SelectListItem {Text = "District 5", Value="5" },
new SelectListItem {Text = "District 6", Value="6" },
new SelectListItem {Text = "District 7", Value="7" },
new SelectListItem {Text = "District 8", Value="8" },
new SelectListItem {Text = "District 9", Value="9" },
new SelectListItem {Text = "District 10", Value="10" }
}, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Org_Number, "Org Number", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-4">
@Html.EditorFor(model => model.Org_Number, new { htmlAttributes = new { @class = "form-control", placeholder = "0025" } })
@Html.ValidationMessageFor(model => model.Org_Number, "", new { @class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Hire_Date, "Hire Date", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-4">
@Html.EditorFor(model => model.Hire_Date, new { htmlAttributes = new { @class = "datepicker" } })
@Html.ValidationMessageFor(model => model.Hire_Date, "", new { @class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Job_Title, "Job Title", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-4">
@Html.EditorFor(model => model.Job_Title, new { htmlAttributes = new { @class = "form-control", placeholder = "Programmer Analyst" } })
@Html.ValidationMessageFor(model => model.Job_Title, "", new { @class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Work_Schedule, "Work Schedule", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("Work_Schedule", new List<SelectListItem>
{
new SelectListItem {Text = "8 hours per day, 5 days per week", Value="8 hours per day, 5 days per week" },
new SelectListItem {Text = "8.5 hours per day, 5 days per week", Value="8.5 hours per day, 5 days per week" },
new SelectListItem {Text = "9 hours per day, 5 days per week", Value="9 hours per day, 5 days per week" },
new SelectListItem {Text = "10 hours per day, 4 days per week", Value="10 hours per day, 4 days per week" },
new SelectListItem {Text = "10 hours per day, 5 days per week", Value="10 hours per day, 5 days per week" },
new SelectListItem {Text = "10.5 hours per day, 4 days per week", Value="10.5 hours per day, 4 days per week" },
new SelectListItem {Text = "10.5 hours per day, 5 days per week", Value="10.5 hours per day, 5 days per week" },
new SelectListItem {Text = "11 hours per day, 4 days per week", Value="11 hours per day, 4 days per week" },
new SelectListItem {Text = "11 hours per day, 5 days per week", Value="11 hours per day, 5 days per week" },
new SelectListItem {Text = "12 hours per day, 4 days per week", Value="12 hours per day, 4 days per week" },
new SelectListItem {Text = "12 hours per day, 5 days per week", Value="12 hours per day, 5 days per week" },
}, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Work_Schedule, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="infobox">
<div class="innerBox">
<h4 class="title2">Employment information</h4>
<hr style="border:0px;border-top:1px solid black;width:75%;" />
<p>Information Related to the Employee's Position</p>
</div>
</div>
</div>
<hr style="border:0px;border-top:1px solid grey;width:75%;" />
<div class="container">
<div class="Info">
<div class="form-group">
@Html.LabelFor(model => model.Injury_Date, "Injury Date", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-4">
@Html.EditorFor(model => model.Injury_Date, new { htmlAttributes = new { @class = "datepicker" } })
@Html.ValidationMessageFor(model => model.Injury_Date, "", new { @class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Injury_Time, "Injury Time", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-4">
@Html.EditorFor(model => model.Injury_Time, new { htmlAttributes = new { @class = "form-control", placeholder = "2:00pm" } })
@Html.ValidationMessageFor(model => model.Injury_Time, "", new { @class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.DOT_12, "Injury Documented on DOT-12?", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("DOT_12", new List<SelectListItem>
{
new SelectListItem {Text = "Yes", Value="Yes" },
new SelectListItem {Text = "No", Value="No" },
new SelectListItem {Text = "DOT-12 Pending", Value="DOT-12 Pending" },
new SelectListItem {Text = "Not Applicable", Value="Not Applicable" },
}, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Start_Time, "Start Time on Date of Injury", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-4">
@Html.EditorFor(model => model.Start_Time, new { htmlAttributes = new { @class = "form-control", placeholder = "8:00am" } })
@Html.ValidationMessageFor(model => model.Start_Time, "", new { @class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Injured_Body_Part, "Injured Body Part", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-4">
@Html.EditorFor(model => model.Injured_Body_Part, new { htmlAttributes = new { @class = "form-control", placeholder = "Forearm" } })
@Html.ValidationMessageFor(model => model.Injured_Body_Part, "", new { @class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Side, "Which Side", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("Work_Schedule", new List<SelectListItem>
{
new SelectListItem {Text = "Left", Value="Left" },
new SelectListItem {Text = "Right", Value="Right" },
new SelectListItem {Text = "Both", Value="Both" },
new SelectListItem {Text = "Not Applicable", Value="Not Applicable" },
new SelectListItem {Text = "See Comments", Value="See Comments" },
}, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Missing_Work, "Missing Work", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
@Html.EditorFor(model => model.Missing_Work)
@Html.ValidationMessageFor(model => model.Missing_Work, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Return_to_Work_Date, "Return to Work Date", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-4">
@Html.EditorFor(model => model.Return_to_Work_Date, new { htmlAttributes = new { @class = "datepicker" } })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Doctors_Release, "Doctor's Work Release Obtained? (Do not choose Yes unless you have the work release in hand; Send it to HR)", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("Doctors_Release", new List<SelectListItem>
{
new SelectListItem {Text = "Yes", Value="Yes" },
new SelectListItem {Text = "No", Value="No" },
new SelectListItem {Text = "Not Yet", Value="Not Yet" },
new SelectListItem {Text = "Not Treated", Value="Not Treated" },
}, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Treatment, "Treatment Pursued/Scheduled?", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
@Html.CheckBoxFor(model => model.Treatment)
@Html.ValidationMessageFor(model => model.Treatment, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Injury_Description, "Injury Description", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-4">
@Html.TextAreaFor(model => model.Injury_Description, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Injury_Description, "", new { @class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Equipment, "Equipment", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextAreaFor(model => model.Equipment, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Equipment, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Witness, "Name witnesses if any (If none, state no witnesses).", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextAreaFor(model => model.Witness, new { htmlAttributes = new { @class = "form-control", @cols = 40, @rows = 10 } })
@Html.ValidationMessageFor(model => model.Witness, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Questioned, "If the injury is questioned, state why (If not questioned, say 'Not Questioned').", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextAreaFor(model => model.Questioned, new { htmlAttributes = new { @class = "form-control", placeholder = "Not Questioned" } })
@Html.ValidationMessageFor(model => model.Questioned, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Medical_History, "If there is a prior relevant medical history, mention what it is (If none known, state none known).", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextAreaFor(model => model.Medical_History, new { htmlAttributes = new { @class = "form-control", placeholder = "None known" } })
@Html.ValidationMessageFor(model => model.Medical_History, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Inbox_Submitted, "Was this inbox submitted within 48 hours/2 business days of the injury date?", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("Inbox_Submitted", new List<SelectListItem>
{
new SelectListItem {Text = "Yes", Value="Yes" },
new SelectListItem {Text = "No", Value="No" },
}, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Inbox_Reason, "Reason", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextAreaFor(model => model.Inbox_Reason, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Inbox_Reason, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Comments, "Comments", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextAreaFor(model => model.Comments, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Comments, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="infobox">
<div class="innerBox">
<h4 class="title2">Injury</h4>
<hr style="border:0px;border-top:1px solid black;width:75%;" />
<p>Enter Information About the Employee's Injury</p>
</div>
</div>
</div>
<hr style="border:0px;border-top:1px solid grey;width:75%;" />
<div class="container">
<div class="Info">
<div class="form-group">
@Html.LabelFor(model => model.User_Email, "User Email", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-4">
@Html.EditorFor(model => model.User_Email, new { htmlAttributes = new { @class = "form-control", placeholder = "John.Doe@wv.gov" } })
@Html.ValidationMessageFor(model => model.User_Email, "", new { @class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Contact_Email, "Contact Email", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-4">
@Html.EditorFor(model => model.Contact_Email, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Contact_Email, "", new { @class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Specialist_Email, "Specialist Email", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-4">
@Html.EditorFor(model => model.Specialist_Email, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Specialist_Email, "", new { @class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Optional_Email, "Optional Email", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Optional_Email, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Optional_Email, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Optional_Email2, "Optional Email 2", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Optional_Email2, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Optional_Email2, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Optional_Email3, "Optional Email 3", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Optional_Email3, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Optional_Email3, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Optional_Email4, "Optional Email 4", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Optional_Email4, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Optional_Email4, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="infobox">
<div class="innerBox">
<h4 class="title2">Email</h4>
<hr style="border:0px;border-top:1px solid black;width:75%;" />
<p>Enter Your Email Address , a District Contact's Email Address, and an Occupational Safety Specialist's Email Address. Add Optional Email Addresses if you are submitting the form on behalf of the designated reporter and you want the designated reporter to receive a copy.</p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
【问题讨论】：
-
请提供一个最小可重现的例子。在你的代码 sn-p 中发生了很多事情
-
@johannchopin 我分享了整个页面，以便您在需要时可以看到它，但没有必要了解问题。如果您觉得这无法重现，您需要做的就是在开箱即用的 ASP.Net MVC 框架中创建一个空视图，并添加一个带有 display:flex 的 div，而不将 flex 添加到 _layout.cshtml开箱即用的页面。
标签： html css asp.net-mvc layout flexbox