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中使用行来执行此操作，然后浮动控件组

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的网格系统而不是浮动。

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

1 个答案: