如何在Bootstrap 3中内联输入和表格单元格内的按钮？

Question

我一直在尝试弄清楚如何才能在表格单元格内的同一行中获得输入域和按钮，而不会过多地拉伸列。

这就是我想要的内联：

<td>
   <input type="text" class="input-sm form-control"id="measured_value" name="measured_value" placeholder="Measured value">
   <button type="button" class="btn btn-xs btn-primary" onclick="add_measurement();">Submit</button>
</td>

这是我得到的：

​

​

我也尝试过使用带有col lg-8和col lg-4的div，它确实内联了它们，但这反过来又拉长了这一列。它使列更宽了1.5倍，我正在努力使表格更紧凑。

Answer 1

似乎表单控件是它不能内联的原因。因此，我最终删除了表单控件，并为表单控件附带的边框添加了这个。

.input-sm{
   border: 1px solid #CCC;
   border-radius: 4px;
}

Answer 2

最简单的方法是让它们浮动。例如：

CSS

.input_class{
float:left;
}
.btn{
float:left;
}