css - 如何使用 Twitter Bootstrap 在 TD 中垂直对齐按钮、文本和输入文本字段

Question

<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>

我已经为 TD 尝试了 style="vertical-align:middle", valign="middle" 但它不起作用

它是这样的:http://ge.tt/1Klf2dS/v/0?c

Answer 1

Twitter Bootstrap 将添加一个 margin-bottom: 10px大多数表单元素，但不包括 <button>元素。如果将 HTML 元素放在表格的一行中，这将导致您的 HTML 元素看起来奇怪地对齐。

您可以从元素中删除底部边距，或者将其添加到其他元素。

看看这个例子:

http://jsbin.com/ezunom/1/edit