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

Question

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

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

有什么适当的方法可以实现这一目标吗？

我为我的表单提供了以下代码：

<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