Html 如何左对齐这些 Bootstrap 表单项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14266175/
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
How do I left align these Bootstrap form items?
提问by Tom Maxwell
I'm using Bootstrap for the first time, and am having a lot of trouble aligning this form-horizontal to the left.
我是第一次使用 Bootstrap，并且在将此表单水平向左对齐时遇到了很多麻烦。
The list items are horizontal, as they should be, but I want the control-labels (the Bootstrap class for form labels) to all be at the same position floated left.
列表项应该是水平的，但我希望控件标签（表单标签的 Bootstrap 类）都位于向左浮动的相同位置。
The form is contained in a div with a span of 7, as my site is two columns -- 7 and 4 columns.
该表单包含在跨度为 7 的 div 中，因为我的站点是两列 - 7 列和 4 列。
Below is my HTML. If you look under "Horizontal Forms" on this page http://accounts.tao.tw.shuttle.com/examples_bootstrap/basecss/forms, you'll see that the labels are left aligned, but not absolutely left-aligned so that the beginning of the labels are at the same position vertically.
下面是我的 HTML。如果您查看此页面http://accounts.tao.tw.shuttle.com/examples_bootstrap/basecss/forms上的“水平表格” ，您会看到标签是左对齐的，但不是绝对左对齐的标签的开头垂直位于相同的位置。
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputSaving">What are you saving for?</label>
<div class="controls">
<input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc.">
</div>
</div>
<div class="control-group">
<label class="control-label" for="description">Add a short description</label>
<div class="controls">
<textarea class="span4" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="categoryselect">Choose a Category</label>
<div class="controls">
<select class="span4">
<!-- Add some CSS and JS to make a placeholder value-->
<option value="Kittens">Kittens</option>
<option value="Keyboard Cat">Keyboard Cat</option>
<option value="Twitter Bird">Twitter Bird</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="goal">Your Saving Goal</label>
<div class="controls">
<input type="text" class="span4" id="goal">
</div>
</div>
<button class="btn btn-large btn-primary" type="button">Submit</button>
</form>
回答by Tim B James
Just my two cents. If you are using Bootstrap 3 then I would just add an extra style into your own site's stylesheet which controls the text-leftstyle of the control-label.
只有我的两分钱。如果您使用的是 Bootstrap 3，那么我只会在您自己网站的样式表中添加一个额外的样式，该text-left样式表控制control-label.
If you were to add text-leftto the label, by default there is another style which overrides this .form-horizontal .control-label. So if you add:
如果您要添加text-left到标签，默认情况下还有另一种样式会覆盖 this .form-horizontal .control-label。所以如果你添加：
.form-horizontal .control-label.text-left{
text-align: left;
}
Then the built in text-leftstyle is applied to the label correctly.
然后将内置text-left样式正确应用于标签。
回答by David Taiaroa
If you are saying that your problem is how to left align the form labels, see if this helps:
http://jsfiddle.net/panchroma/8gYPQ/
如果你说你的问题是如何左对齐表单标签，看看这是否有帮助：http:
//jsfiddle.net/panchroma/8gYPQ/
Try changing the text-align left / right in the CSS
尝试在 CSS 中更改 text-align left / right
.form-horizontal .control-label{
/* text-align:right; */
text-align:left;
background-color:#ffa;
}
Good luck!
祝你好运！
回答by Ruben Benjamin
Instead of altering the original bootstrap css class create a new css file that will override the default style.
不是更改原始引导 css 类，而是创建一个新的 css 文件，该文件将覆盖默认样式。
Make sure you include the new css file after including the bootstrap.css file.
确保在包含 bootstrap.css 文件后包含新的 css 文件。
In the new css file do
在新的 css 文件中做
.form-horizontal .control-label{
text-align:left !important;
}
回答by Bruno F Souza
Just add style="text-align: left"to your label.
只需添加style="text-align: left"到您的标签。
回答by SupportLocusDev
"pull-left" is what you need, it looks like you are using Bootstrap 2, I am not sure if that is available, consider bootstrap 3, unless ofcourse it is a huge rework! ... for Bootstrap 3 but you need to make sure you have 12 columns in each row as well, otherwise you will have issues.
“pull-left”是你所需要的，看起来你正在使用 Bootstrap 2，我不确定它是否可用，考虑使用 bootstrap 3，除非它是一个巨大的返工！... 对于 Bootstrap 3，但您需要确保每行也有 12 列，否则您会遇到问题。
回答by Laser One Jim
I was having the exact same problem. I found the issue within bootstrap.min.css. You need to change the label:
label {display:inline-block;}to label {display:block;}
我遇到了完全相同的问题。我在 bootstrap.min.css 中发现了这个问题。您需要更改标签：
label {display:inline-block;}到label {display:block;}
