Bootstrap3 mvc 5 - 中心格式div
我对这个设计很头疼。
我如何在内联表单标签和属于表单控件类的文本框中分离一点。
我已经尝试了所有的东西，边缘和对齐文本，但我没有找到解决方案
这是一张照片：
这是代码：
<div class="container">
<div class="row">
<div class="span9">
<br />
<h2 style="margin-top:100px;text-align:center">
APPLY FOR INTERNSHIP PROGRAM
</h2>
</div>
<div class="col-md-4 col-sm-4 col-md-offset-4">
<br />
<div class="form-group">
@Html.LabelFor(model => model.Name, "Name", htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.Surname, "Surname", htmlAttributes: new { @class = "control-label col-md-2 col-md-2 col-sm-2" })
@Html.EditorFor(model => model.Surname, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Surname, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.Location, "Location", htmlAttributes: new { @class = "control-label col-md-2" })
@*@Html.DropDownList("LocationID", null, "--Choose location--", new { @class = "form-control" })*@
@Html.DropDownListFor(model => model.LocationID, ViewBag.LocationID as IEnumerable<SelectListItem>, "-----Select Category-----", new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Location, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.Mail, "E-mail", htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.Mail, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Mail, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.Telephone, "Telephone number", htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.Telephone, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Telephone, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.StartEduYear, "Entrance study year", htmlAttributes: new { @class = "control-label col-md-2" })
@Html.DropDownListFor(model => model.StartEduYear, ViewBag.StartYearFaculty as IEnumerable<SelectListItem>, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.StartEduYear, "", new { @class = "text-danger" })
</div><br />
<div class="form-group">
@Html.LabelFor(model => model.EnglishLang.NameLang, "English level", htmlAttributes: new { @class = "control-label col-md-2" })
@Html.DropDownList("EngID", null, "--Choose level--", new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.EngID, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.Faculty.FacultyName, "Faculty", htmlAttributes: new { @class = "control-label col-md-2" })
@Html.DropDownListFor(model => model.FacultyID, ViewBag.FacultyID as IEnumerable<SelectListItem>, "--Select a faculty--", new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.FacultyID, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.AvgScore, "Average score", htmlAttributes: new { @class = "control-label col-md-2" })
@Html.DropDownListFor(model => model.AvgScore, ViewBag.AverScore as IEnumerable<SelectListItem>, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.AvgScore, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.GradYear, "Graduation year", htmlAttributes: new { @class = "control-label col-md-2" })
@Html.DropDownListFor(model => model.GradYear, ViewBag.GradYear as IEnumerable<SelectListItem>, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.GradYear, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.WExp, "Work Experience", htmlAttributes: new { @class = "control-label col-md-2" })
@Html.TextAreaFor(model => model.WExp, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.WExp, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.Interests, "Interests", htmlAttributes: new { @class = "control-label col-md-2" })
@Html.TextAreaFor(model => model.Interests, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Interests, "", new { @class = "text-danger" })
</div>
<span>Did you have any additional trainings?</span>
<label for="chkYes">
<input type="radio" id="chkYes" name="chkPassPort" onclick=" ShowHideDiv() " />Yes
</label>
<label for="chkNo">
<input type="radio" id="chkNo" name="chkPassPort" onclick=" ShowHideDiv() " />No
</label>
<div class="form-group" id="dvPassport" style="display: none">
@Html.LabelFor(model => model.Trainings, "Trainings", htmlAttributes: new { @class = "control-label col-md-2" })
@Html.TextAreaFor(model => model.Trainings, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Trainings, "", new { @class = "text-danger" })
</div>
<p></p>
<span>Did you have any projects recently?</span>
<label for="chkYes">
<input type="radio" id="chkYes1" name="chkPassPort1" onclick=" ShowHideDiv() " />Yes
</label>
<label for="chkNo">
<input type="radio" id="chkNo1" name="chkPassPort1" onclick=" ShowHideDiv() " />No
</label>
<div class="form-group" id="dvExample" style="display: none">
@Html.LabelFor(model => model.Projects, "Projects", htmlAttributes: new { @class = "control-label col-md-2" })
@Html.TextAreaFor(model => model.Projects, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Projects, "", new { @class = "text-danger" })
</div>
<p></p>
<span>Have you been in some students organization?</span>
<label for="chkYes">
<input type="radio" id="chkYes2" name="chkPassPort2" onclick=" ShowHideDiv() " />Yes
</label>
<label for="chkNo">
<input type="radio" id="chkNo2" name="chkPassPort2" onclick=" ShowHideDiv() " />No
</label>
<div class="form-group" id="dvExample1" style="display: none">
@Html.LabelFor(model => model.StudOrg, "Organizations", htmlAttributes: new { @class = "control-label col-md-2" })
@Html.TextAreaFor(model => model.StudOrg, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.StudOrg, "", new { @class = "text-danger" })
</div>
<p></p>
<input type="submit" value="Apply" class="btn btn-default" style="text-align: center" />
</div>
@*<div class="form-group">
sdsdsdsd
<div class="g-recaptcha" data-sitekey="6LccVRcTAAAAADLo_LxSj4mQzt9jLrgbo5L9wZ-J"></div>
<div>sdsdsds11
@if (TempData["recaptcha"] != null)
{
<p>@TempData["recaptcha"]</p>
}
</div>
</div>*@
@*<div class="col-md-offset-2 col-md-10">
<div class="form-group">1231
@Html.Recaptcha()
</div>
</div>*@
</div>
</div>
2 个答案:
答案 0 :(得分：1)
我认为你需要再看一下Bootstrap文档。如果您正在使用Bootstrap 3.x，则不应使用span*（属于Bootstrap 2.x）。已将span*替换为col-md-*。
您可以参考this migration guide。
此外，您应将所有.form-group元素放在.form-horizontal容器中。
答案 1 :(得分：1)
你只是没有给元素足够的空间。您的表单限制为4列，然后您的标签限制为2列。基本上，表单是总可用宽度的4/12，然后您的标签是的2/12 ，这意味着您的标签总体上只占总可用宽度的1/18。只是给它一些喘息的空间。也许使您的表单col-md-6或col-md-8和您的标签类似col-md-3。或者，如果您希望在整个表单中使用col-md-4，请将您的标签增加为col-md-4。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？