视图模板中 使用boottstrap 将各表单字段排成一行

时间:2022-03-08 19:42:20

如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 <form> 标签添加 class .form-inline

<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">名称</label>
<input type="text" class="form-control" id="name"
placeholder="请输入名称">
</div>
<button type="submit" class="btn btn-default">提交</button>
Asp.net MVC 中使用bootstrap 布局视图的时候,可以使用内联的样式将各个表单排成一行。View中的代码如下

@using (Html.BeginForm("Index", "Movie", FormMethod.Get, htmlAttributes: new { @class = "form-inline", role = "form" })) //使用get形式发送表单可以使发送的字符串显示在URL中,并保存为书签。
{

<div class="form-group">
<label for="searchString" class="control-label">片名:</label>
</div>

也可以Label标签不用包含在在<div class="from-group">中。直接

<label for="searchString" class="control-label">片名:</label>
<div class="form-group">
@Html.TextBox("searchString", "", htmlAttributes: new { @class = "form-control", placeholder = "请输入片名" })
</div>
<input type="submit" value="查找" class="btn btn-primary" />

}

截图如下:

视图模板中 使用boottstrap 将各表单字段排成一行