twitter-bootstrap 水平表格 - 设置控件标签宽度的最佳方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15791913/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontal Form - Best way to set width of a control label?
提问by user1452140
I'm new to twitter bootstrap and I'm working with a horizontal form. My code is something like this:
我是 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>
When I do this the form looks fine. The only problem is the length of the control-label is way too long so I get a lot of whitespace to the left of the labels. Is there a way to shorten the label so I don't get as much whitespace?
当我这样做时，表格看起来不错。唯一的问题是控制标签的长度太长了，所以我在标签的左边有很多空白。有没有办法缩短标签，这样我就不会得到那么多的空白？
Thanks.
谢谢。
回答by Dmonix
I did it by creating couple of extra form classes and use them depending on the size I need.
我通过创建几个额外的表单类并根据我需要的大小使用它们来做到这一点。
This is my css:
这是我的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;
}
So if I need small label:
所以如果我需要小标签：
<form class="form-horizontal form-small">
<!-- form body -->
</form>
Of course you can setup your own .control-labeland .controlswidths according to your needs.
当然，您可以根据需要设置自己的宽度.control-label和.controls宽度。
Hope that helps!
希望有帮助！
回答by jsaddwater
<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>
I usually span the element in need for fixed size in a "span" element but this is for generating repeated forms
我通常在“跨度”元素中跨越需要固定大小的元素，但这是为了生成重复的形式
回答by adi
Try using to create a container:
尝试使用创建容器：
<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>
