html - 如何排列文本框并平衡它们？

我有12个文本框，如下所示。我想把它们排成一行，这样在顶部和底部总是出现相同数量的框。例如，它可能是2行6，或者在另一个屏幕宽度上，它可能是3行4个框。我还想在两行之间留些空间，这样看起来更好。最后，它们都应该排成一行，我注意到我的最下面一行似乎有一个额外的空间，所以最上面和最下面的行没有完全对齐。
最好的方法是什么？

<input name="Neighborhood1" type="text" id="Neighborhood1">
<input name="Neighborhood2" type="text" id="Neighborhood2">
<input name="Neighborhood3" type="text" id="Neighborhood3">
<input name="Neighborhood4" type="text" id="Neighborhood4">
<input name="Neighborhood5" type="text" id="Neighborhood5">
<input name="Neighborhood6" type="text" id="Neighborhood6">
<input name="Neighborhood7" type="text" id="Neighborhood7">
<input name="Neighborhood8" type="text" id="Neighborhood8">
<input name="Neighborhood9" type="text" id="Neighborhood9">
<input name="Neighborhood10" type="text" id="Neighborhood10">
<input name="Neighborhood11" type="text" id="Neighborhood11">
<input name="Neighborhood12" type="text" id="Neighborhood12">

最佳答案

不加载引导就可以了。基本上，您需要的是在不同的断点为12个输入设置一个流畅的布局。我用susy做了计算，但实际上只是百分比宽度和媒体查询。不确定这是不是你要找的。

@media only screen and (max-width: 319px) {
input {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0;
  }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
input {
    width: 49.15254%;
    float: left;
    margin-right: 1.69492%;
}
input:nth-child(2n) {
    float: right;
    margin-right: 0;
  }
}

JSFiddle