如何将Bootstrap表单输入更接近彼此？

Question

我正在使用Bootstrap构建一个表单，我需要在一行上放置许多输入，就像它在电子表格中一样。因此，使用常规的Bootstrap网格系统，我做了这个（片段）：

<div class="col-sm-1">
    <div class="form-group">
        <textarea placeholder="Description" class="form-control" rows="1" required></textarea>
    </div>
</div>
<div class="col-sm-1">
    <input placeholder="Remaining contract term" class="form-control" type="text">
</div>
<div class="col-sm-1">
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">€</div>
            <input placeholder="Contract rental" class="form-control" type="text">
        </div>
    </div>
</div>
etc.

导致：

显然，这看起来很可怕。对于这种特定形式，我需要将输入放置得更靠近彼此，以便它们（几乎）相互接触。

有人知道我如何更好地设计这个样式吗？欢迎所有提示！

Answer 1

这可能很有用。

如果您希望表单在较小的设备上堆叠，则可以通过媒体查询调整列填充，以使填充恢复正常。

9876543.987600000
9876543.000000000
9876544.000000000
9876545.000000000

@media (min-width: 768px) {
  form .form-gutter >[class*='col-'] {
    padding-right: 1px;
    padding-left: 1px;
  }
}
form .form-control,
form .input-group-addon {
  border-radius: 0;
}