我是twitter bootstrap的新手,我正在使用水平表单.我的代码是这样的:
<form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="whatever">Whatever</label> <div class="controls"> <select id="whatever" name="whatever"> <option value="blah">Blah</option> </select> </div> </div> <div class="control-group"> <label class="control-label" for="another">Another</label> <div class="controls"> <select id="something" name="something"> <option value="MyEntry">MyEntry</option> </select> </div> </div> <button type="submit" class="btn">Search</button> </form>
当我这样做时,表格看起来很好.唯一的问题是控件标签的长度太长,所以我在标签的左边有很多空格.有没有办法缩短标签,所以我没有得到那么多的空白?
谢谢.
解决方法
我通过创建几个额外的表单类来完成它,并根据我需要的大小使用它们.
这是我的css:
.form-small .control-label { width: 100px; } .form-small .controls { margin-left: 120px; } .form-medium .control-label { width: 180px; } .form-medium .controls { margin-left: 200px; } .form-xlarge .control-label { width: 240px; } .form-xlarge .controls { margin-left: 260px; }
所以,如果我需要小标签:
<form class="form-horizontal form-small"> <!-- form body --> </form>
当然,您可以根据需要设置自己的.control-label和.controls宽度.
希望有所帮助!