Forms 使用Twitter引导程序为列类型输入设计表单

我想设计一个类似这样的表单：

我查阅了Twitter引导的文档，发现没有合适的方法来实现这一点，除非你做一些CSS黑客来实现这一点。我不想做任何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>

开始
终点
分享

我还创建了一个。呈现上述表单时存在两个问题：

标签不是水平的

文本输入之间的间距不合适

---

是的，您可以借助网格实现该布局

像这样的东西应该能起作用：

<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>

一个
两个
三

---

请参见此处的演示：

是的，您可以借助网格实现该布局

像这样的东西应该能起作用：

<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>

一个
两个
三

---

请参见此处的演示：

谢谢。我以前尝试过这个解决方案。这个表单的问题是，当它切换到移动布局时，表单的所有行彼此垂直堆叠，即使它们前面有额外的空间。@Sibi您希望移动布局有什么行为？您希望表单保持相同的布局吗？在移动布局中，我希望保持相同的布局。行不应该垂直堆叠。@Sibi AFAIK没有任何纯引导的解决方案。如果你想这样做，我认为你必须使用一些CSS技巧。如果CSS技巧能够使表单在移动布局中响应，那么就可以了。谢谢。我以前尝试过这个解决方案。这个表单的问题是，当它切换到移动布局时，表单的所有行彼此垂直堆叠，即使它们前面有额外的空间。@Sibi您希望移动布局有什么行为？您希望表单保持相同的布局吗？在移动布局中，我希望保持相同的布局。行不应该垂直堆叠。@Sibi AFAIK没有任何纯引导的解决方案。如果你想这样做，我认为你必须使用一些CSS技巧。如果CSS技巧能使表单在移动布局中响应，那么就可以了。