一个在输入上带有标签的表单，但也使用 Bootstrap 内联标签和输入？

Question

我想要一个如下所示的表单：

Order    Person      City           Street
1234     Joe         Hull           Coronation


Date         Phone
1/1/2001     051-666-333

默认样式为我提供了输入的标签，但随后它将所有输入堆叠在一起。

有没有什么方法可以在输入上实现标签，但也可以让所有字段彼此内联？请注意，我想尽可能多地坚持使用 twitter 框架，所以我认为不要添加太多额外的标记或 div 很重要。

Answer 1

我不认为这与 jQuery 有任何关系，就像 @ManseUK 说这可能是一个 css 问题。我不确定您是否将其包围在一个元素中，但您应该能够使用引导程序中的行来执行此操作，然后浮动控制组

http://jsfiddle.net/billpull/uWeW5/

根据任何其他可能的其他属性，将这样的类添加到您的 css 或您想要命名的任何内容中

.float-left {
   float: left;
}

并将您的 html 代码更改为类似的内容。

         <div class="row">
            <div class="control-group float-left">
                <label class="control-label">Some label</label>
                <div class="controls">
                    <input type="text" />
                </div>
            </div>
            <div class="control-group float-left">
                <label class="control-label">Some label</label>
                <div class="controls">
                    <input type="text" />
                </div>
            </div>
            <div class="control-group float-left">
                <label class="control-label">Some label</label>
                <div class="controls">
                    <input type="text" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group float-left">
                <label class="control-label">Some label</label>
                <div class="controls">
                    <input type="text" />
                </div>
            </div>
            <div class="control-group float-left">
                <label class="control-label">Some label</label>
                <div class="controls">
                    <input type="text" />
                </div>
            </div>
        </div>

根据您的宽度限制，您可能希望使用引导程序的网格系统而不是浮动。