我是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>
当我这样做时,表格看起来很好。唯一的问题是控件标签的长度太长,所以我在标签的左边有很多空格。有没有办法缩短标签,所以我没有得到那么多的空格?
感谢。
答案 0 :(得分:10)
我是通过创建几个额外的表单类来完成的,并根据我需要的大小使用它们。
这是我的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
宽度。
希望有所帮助!
答案 1 :(得分:0)
<form class="form-inline"
ng-submit="addCategory(transaction, categoryText)"
style='display:inline;'>
<span class="span2">
<label style='display:inline; width:140px'>{{param}}</label>
</span>
<input type="text" ng-model="categoryText" size="20" placeholder="add category">
</form>
我通常在“span”元素中跨越需要固定大小的元素,但这是用于生成重复的表单
答案 2 :(得分:0)
尝试使用创建容器:
<div class="set_inline_block_class_selector">
<label>
<input type="radio" name="example_radio">Bootstrap radio button with controlled label
</label>
</div>
<style>
.set_inline_block_class_selector label{
display: inline-block;
}
</style>