twitter-bootstrap 如何使用 Twitter Bootstrap 在 TD 中垂直对齐按钮、文本和输入文本字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13639797/
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 to vertically align button, text and input text field in TD using Twitter Bootstrap
提问by mpet
<tr>
<td colspan="3">
With Selected:
<select name="action" id="group_action" class="span2">
<option value="">--Choose--</option>
<option value="delete">Delete</option>
<option value="add_to">Add To</option>
</select>
<select name="group" id="group">
<option value="">--Choose--</option>
<?php foreach($groups as $group){ ?>
<option value="<?php echo $group->id?>"><?php echo $group->name?></option>
<?php } ?>
</select>
<button name="group_action" class="btn">Submit</button>
</td>
</tr>
I've tried style="vertical-align:middle", valign="middle"for the TD but it doesn't work
我试过style="vertical-align:middle", valign="middle"TD 但它不起作用
Here's how it looks like: http://ge.tt/1Klf2dS/v/0?c
这是它的样子：http: //ge.tt/1Klf2dS/v/0?c
回答by Jeemusu
Twitter bootstrap will add a margin-bottom: 10pxto most form elements, but not to the <button>element. This will cause your HTML elements to look oddly aligned if placed in a single row of a table.
Twitter bootstrap 会将 a 添加margin-bottom: 10px到大多数表单元素，但不会添加到<button>元素。如果将 HTML 元素放在表格的单行中，这将导致您的 HTML 元素看起来奇怪地对齐。
You could either remove the margin-bottom from the element, or add it to the other elements.
您可以从元素中删除边距底部，也可以将其添加到其他元素中。
Take a look at this example:
看看这个例子：
回答by CptCook
Since you're asking about Twitter Bootstrap, and your code seems to form part of a form (forgive the redundancy), adding the "form-horizontal" class to the form should solve your aligning problems:
由于您在询问 Twitter Bootstrap，并且您的代码似乎构成了表单的一部分（请原谅冗余），将“表单水平”类添加到表单应该可以解决您的对齐问题：
<form class="form-horizontal">
</form>
回答by Pawan Lakhara
use this
用这个
style="Margin-top:-10px;"
回答by azerafati
This one is trick for these kinds of labels, ;)
这是这些标签的技巧，;)
add a .checkboxto the label
.checkbox在标签上添加一个
<label class="col-sm-4 checkbox">Cinsiyet</label>
<label class="col-sm-4 checkbox">Cinsiyet</label>
the class will do no harm and just add a margin as you need
该课程不会造成任何伤害，只需根据需要添加边距
