2

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

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

我无法使用引导程序中描述的类系统将所有这些放在一行中。我可以在同一行上获得两个输入，但我不知道如何将它与中间的 non_input 跨度结合起来，然后是最后两个输入。我该怎么做？

更新：

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

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

2 回答 2

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

这是小提琴。现在你只需要调整间距。

还要注意你使用的 HTML 元素，标签应该与一个控件相关联。

于 2012-08-28T09:20:15.340 回答
1

我想使用标签，所以我有这个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>
于 2013-05-30T22:54:32.813 回答