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

 

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <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" />

}

截图如下：