Question

我想使用Twitter Bootstrap制作预算模板。输出应该有一个行标签，两个内联输入，一个总输出，两个内联输入和一个最终总输出。这个想法是每一行都是一个类别，这对输入将是数量和费率，当乘以时，产生总数。它将类似于以下内容：

Category_1     Input_1    Input_2   Total=Input_1*Input_2       Input_3    Input_4    Total=Input_3*Input_4

我无法使用bootstrap中描述的类系统将所有这些放在一行上。我可以在同一行上获得两个输入，但我不知道如何将它与中间的非输入范围结合，然后是最后两个输入。我怎么能这样做？

更新

我经历了几次迭代试试这个。这只是最近失败的尝试：

<div class="controls controls-row">
    <label class="control-label">Category 1</label>
    <input class="span1" type="text" placeholder="Input 1">
    <input class="span1" type="text" placeholder="Input 2">
    <label class="control-label">Total 1</label>
    <input class="span1" type="text" placeholder="Input 3">
    <input class="span1" type="text" placeholder="Input 4">
    <label class="control-label">Total 2</label>
</div>

Answer 1

<form class="form-inline">
    <span>Category 1</span>
    <input type="text" class="input-small" placeholder="Input 1">
    <input type="text" class="input-small" placeholder="Input 2">
    <span>Total 1</span>
    <input type="text" class="input-small" placeholder="Input 3">
    <input type="text" class="input-small" placeholder="Input 4">
    <span>Total 2</span>
</form>

这是fiddle。现在你只需调整间距。

还要注意您正在使用的HTML元素，使用控件标记should be associated。

Answer 2

我想使用标签，因此我有for属性。请注意，我不在标签上使用control-label类，否则会搞砸。我发现当你有一个狭窄的窗口或移动窗口时，这会表现得更好，因为标签和输入保持在一起并且两列首先包裹。

<div class="form-inline">
     <span style="margin-right:8px">
       <label for="IsPublic">Is Public:</label>
       <input id="IsPublic" .../>
     </span>
     <span>
       <label for="IsPrivate">Is Private:</label>
       <input id="IsPrivate" .../>
     </span>
</div>

使用Twitter Bootstrap的两列内联表单

2 个答案: