Flexbox 在 ASP.NET MVC (FX) 应用程序中错位共享布局组件

Question

我有这个 _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>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
</body>
</html>

它为页面提供页眉和页脚，最终看起来像这样：

然而，应用程序中的 1 个页面需要某种特定的样式，所以我选择使用 flexbox 并制作了这种样式sheet，这使得页面上的所有内容都使用了这种样式sheet看起来很棒：

.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;
}

但是，自从我向这个 css sheet 添加了 flexbox 后，我只有这个页面上的导航栏被重新定位，页脚被移动到页面顶部：

为什么会发生这种情况，我该如何解决？如果可能，我不想更改布局页面，因为它已在应用程序的所有其他页面中成功使用。如果您需要它，这里是有问题的创建页面（它相当长）：

@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")
}

Answer 1

.container 样式导致了问题。

您在几个地方使用 .container，您的 FormCreate.css（我假设您发布的样式来自该文件）.container 样式覆盖全局 .container 样式。

在您的单独页面中，将 .container class 重命名为尚无样式的内容，并更新样式以使用新的 class，它应该会修复你的问题。

或者将您的 .container 样式嵌套在父级 .pageContainer .container { // styles } 或 .form-horizontal .container { // styles }

下

Flexbox 在 ASP.NET MVC (FX) 应用程序中错位共享布局组件

Flexbox dislocating shared layout components in an ASP.NET MVC (FX) application

html

css

asp.net-mvc

layout

flexbox