html – 带有上面输入标签的Inline Bootstrap表单布局

前端之家收集整理的这篇文章主要介绍了html – 带有上面输入标签的Inline Bootstrap表单布局前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想使用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>

解决方法

我认为最简单的解决方案是将col-xs-4添加到每个div的类中.这将确保divs将内联jsfiddle示例.另外,您应该使用< / form&gt ;.关闭表单标签.
<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>

猜你在找的HTML相关文章