使用Twitter Bootstrap为列类型输入设计表单

Question

我想设计一个这样的表格：

我浏览了Twitter Bootstrap的文档，发现没有正确的方法可以做到这一点，除非你做了一些CSS hacks来实现这一点。我不想做任何CSS黑客攻击，因为它们会使页面无响应。

有没有正确的方法来实现这一目标？

我已经为我的表单提出了以下代码：

<form class="form-horizontal">
<fieldset>
    <div class="control-group">
        <label class="input-mini" for="first">Start</label>
        <label class="input-mini" for="first">End</label>
        <label class="input-mini" for="first">Share</label>
    </div>
    <div class="control-group form-inline">
        <input type="text" class="input-mini">
        <input type="text" class="input-mini">
        <input type="text" class="input-mini">
    </div>
</fieldset>

我还创建了一个jsfiddle。呈现上述表单有两个问题：

1. 标签不是水平的。
2. 文字输入之间的空格不合适。

Answer 1

是的，你可以借助网格实现这种布局。

这样的事情应该做的工作：

<div class="container">

  <div class="row">
    <div class="span1">
        One
    </div>
    <div class="span1">
        Two
    </div>
    <div class="span1">
        Three
    </div>
  </div>

  <div class="row">
    <div class="span1">
        <input type="text" class="input-mini">
    </div>
    <div class="span1">
        <input type="text" class="input-mini">
    </div>
    <div class="span1">
        <input type="text" class="input-mini">
    </div>
  </div>

  <div class="row">
    <!-- Same as above -->
  </div>

  <div class="row">
    <!-- Same as above -->
  </div>
</div>

请参阅此处的演示：http://bootply.com/60908