jquery - 表单在输入上带有标签，但也使用 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 问题。我不确定您是否将其包含在元素中，但您应该能够使用 Bootstrap 中的行来执行此操作，然后 float 控制组

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>

根据宽度限制，您可能需要使用 bootstrap 的网格系统而不是 float 。