这是我为注册帐户并将数据发送到数据库（sql）而编写的原始代码。我正在尝试将此代码放入我下载的模板中。当我尝试调整模板代码以便将数据发送到我的sql时，布局会完全改变。有没有办法调整模板代码而不丢失布局？
原始代码：
body {
.contact {
margin-top: 200px;
position: relative;
.background {
width: 100%;
display: block;
min-height: 400px;
object-fit: cover;
}
&:after,
&:before {
content: "";
position: absolute;
top: 0;
background-color: $main-color;
width: 50%;
height: 1.5%;
z-index: 100;
}
&:after {
transform: skewY(-13.4deg)
}
&:before {
right: 0;
transform: skewY(13.4deg)
}
}
模板代码：
<h2>Create</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>User</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.u_name, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.u_name, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.u_name, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.u_surname, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.u_surname, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.u_surname, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.u_username, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.u_username, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.u_username, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.u_password, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.u_password, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.u_password, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.u_role, "u_role", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("u_role", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.u_role, "", new { @class = "text-danger" })
</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>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
答案 0 :(得分：0)
您必须确保包含样式表（.css）和引导程序库。尝试这样的事情：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="">
<meta name="author" content="">
<title>Title</title>
<link href="~/css/styleExample.min.css" rel="stylesheet">
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body id="page-top" class="sidebar-toggled">
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="login">
<div class="container">
<form>
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="col-md-6 login-do1 animated wow fadeInLeft" data-wow-delay=".5s">
<div class="login-mail">
@Html.EditorFor(model => model.u_name, new { htmlAttributes = new { @class = "form-control", @placeholder="Name", @type = "text" } })
@Html.ValidationMessageFor(model => model.u_name, "", new { @class = "text-danger" })
</div>
<div class="login-mail">
@Html.EditorFor(model => model.u_surname, new { htmlAttributes = new { @class = "form-control", @placeholder="Surname", @type = "text" } })
@Html.ValidationMessageFor(model => model.u_surname, "", new { @class = "text-danger" })
</div>
<div class="login-mail">
@Html.EditorFor(model => model.u_username, new { htmlAttributes = new { @class = "form-control", @placeholder="Username", @type = "text" } })
@Html.ValidationMessageFor(model => model.u_username, "", new { @class = "text-danger" })
</div>
<div class="login-mail">
@Html.EditorFor(model => model.u_password, new { htmlAttributes = new { @class = "form-control", @placeholder = "Password", @type = "password" } })
@Html.ValidationMessageFor(model => model.u_password, "", new { @class = "text-danger" })
</div>
<div class="login-mail">
@Html.DropDownList("u_role", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.u_role, "", new { @class = "text-danger" })
</div>
<a class="news-letter" href="#">
<label class="checkbox1"><input type="checkbox" name="checkbox"><i> </i>I agree with the terms</label>
</a>
</div>
<div class="col-md-6 login-do animated wow fadeInRight" data-wow-delay=".5s">
<label class="hvr-sweep-to-top login-sub">
<input type="submit" value="Submit">
</label>
<p>Already register</p>
<a href="login.html" class="hvr-sweep-to-top">Login</a>
</div>
<div class="clearfix"> </div>
</form>
}
</div>
@Html.ActionLink("Back to List", "Index")
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
@RenderSection("scripts", required: false)
</body>
</html>
希望这对您有所帮助。