带有输入上方标签的内联Bootstrap表单布局 [英] Inline Bootstrap form layout with labels above inputs

问题描述

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

I'd like to create a form with the following layout using Bootstrap 3:

我有一个jsfiddle试图在这里：http://jsfiddle.net/quyB6/

I have a jsfiddle with an attempt here: 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>

推荐答案

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

I think the simplest solution would be to add col-xs-4 to the class of each div. That will make sure the divs will be inline for the jsfiddle example. Additionally, you should close the form tag with </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>

这篇关于带有输入上方标签的内联Bootstrap表单布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！