貌似我们的cols属性没有起作用，原来，只要你的标签加了class='form-control'样式，那它就会在满撑整个div，解决的方法也很简单，比如我们可以在div上面做些处理：
复制代码 代码如下:
<div> @Bootstrap.TextAreaBox("", "", "", 3, 5) </div>
既然cols属性没有起作用，其实参数里面的cols可以考虑去掉。
四、SelectExtensions
又到了纠结的select下拉框。为什么说它纠结呢，因为封装它的时候要考虑很多问题，比如：
<optgroup>和<option>如何处理静态的option值如何传到后台是封装原始的select还是封装成基于某些组件（比如select2）的select方法和事件该如何处理等等
后来转念一想，封装的目的是为了什么？不就是为了使用起来更加方便吗，如果封得太死，使用起来能够方便吗？后来所幸直接封装成最简单的select算了。博主打算这样做：
如果是静态的option，直接写原生的select标签；如果是动态的option，则传递对应的url到后台，取到数据后生成option。封装的代码如下：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace BootstrapExtensions { public static class SelectExtensions { /// <summary> /// 返回select标签 /// </summary> /// <param>扩展方法实例</param> /// <param>标签id</param> /// <returns>select标签</returns> public static MvcHtmlString SelectBox(this BootstrapHelper html, string id) { return SelectBox(html, id, null, null, null, null, null, null); } /// <summary> /// 返回select标签 /// </summary> /// <param>扩展方法实例</param> /// <param>标签id</param> /// <param>标签选中值</param> /// <returns>select标签</returns> public static MvcHtmlString SelectBox(this BootstrapHelper html, string id, object value) { return SelectBox(html, id, value, null, null, null, null, null); } /// <summary> /// 返回select标签 /// </summary> /// <param>扩展方法实例</param> /// <param>标签id</param> /// <param>标签选中值</param> /// <param>标签样式</param> /// <returns>select标签</returns> public static MvcHtmlString SelectBox(this BootstrapHelper html, string id, object value, string cssClass) { return SelectBox(html, id, value, cssClass, null, null, null, null); } /// <summary> /// 返回select标签 /// </summary> /// <param>扩展方法实例</param> /// <param>标签id</param> /// <param>标签选中值</param> /// <param>标签样式</param> /// <param>请求数据的url</param> /// <param>显示字段</param> /// <param>值字段</param> /// <returns>select标签</returns> public static MvcHtmlString SelectBox(this BootstrapHelper html, string id, object value, string cssClass, string url, string textField, string valueField) { return SelectBox(html, id, value, cssClass, url, null, textField, valueField); } /// <summary> /// 返回select标签 /// </summary> /// <param>扩展方法实例</param> /// <param>标签id</param> /// <param>标签选中值</param> /// <param>标签样式</param> /// <param>请求数据的url</param> /// <param>请求的参数</param> /// <param>显示字段</param> /// <param>值字段</param> /// <param>是否多选</param> /// <returns>select标签</returns> public static MvcHtmlString SelectBox(this BootstrapHelper html, string id, object value, string cssClass, string url, string param, string textField, string valueField, bool multiple = false) { TagBuilder tag = new TagBuilder("select"); tag.AddCssClass("form-control"); if (!string.IsNullOrEmpty(id)) { tag.MergeAttribute("id", id); } if (value != null) { tag.MergeAttribute("value", value.ToString()); } if (!string.IsNullOrEmpty(cssClass)) { tag.AddCssClass(cssClass); } if (!string.IsNullOrEmpty(url)) { tag.MergeAttribute("data-url", url); } if (!string.IsNullOrEmpty(param)) { tag.MergeAttribute("data-param", param); } if (!string.IsNullOrEmpty(valueField)) { tag.MergeAttribute("data-value-field", valueField); } if (!string.IsNullOrEmpty(textField)) { tag.MergeAttribute("data-text-field", textField); } if (multiple) { tag.MergeAttribute("multiple", "multiple"); } return MvcHtmlString.Create(tag.ToString()); } } }
然后前端使用js去初始化，需要有一个js文件utility.combobox.js：