html - 输入上方带有标签的内联 Bootstrap 表单布局

Question

我想使用 Bootstrap 3 创建具有以下布局的表单:

我在这里尝试了一个 jsfiddle:http://jsfiddle.net/quyB6/

我试过的标记:

<form>
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Line Height</label>
        <input type="number" value='' class="form-control" id="lineHeight">
    </div>
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Padding Top</label>
        <input type="number" value='' class="form-control" id="paddingTop" />
    </div>
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Padding Bottom</label>
        <input type="number" value='' class="form-control" id="paddingBottom">
    </div>
</div>

Answer 1

我认为最简单的解决方案是添加 col-xs-4到每个分区的类。这将确保 jsfiddle 示例中的 div 是内联的。此外，您应该使用 </form> 关闭表单标签。 .

<form>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Line Height</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Ime">
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Padding Top</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Ime">
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Padding Bottom</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Ime">
    </div>
</form>