引导表单输入字段对齐

kLuB3

关注

发信

关注(28)粉丝(399)

引导表单输入字段对齐

本文介绍了引导表单输入字段对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下代码

<div class="control-group"><label class="control-label" for="inputSubject">Subject</label><div class="控件"><input type="text" id="inputSubject" class="span8" >

<div class="control-group"><label class="control-label" for="inputTags">Tags</label><div class="控件"><input type="text" id="inputTags" class="span3">

<div class="control-group"><label class="control-label" for="inputAccess">access</label><div class="控件"><input type="text" id="inputAccess" class="span3">

我得到如下表格

有人可以建议我如何像下面这样吗?感谢您的帮助

JS Fiddle 链接 http://jsfiddle.net/kLuB3/331/

解决方案

form-inline 比 form-horizontal 更适合于此.

试试这个:

<div class="row"><label class="span1" for="inputSubject">Subject</label><input type="text" id="inputSubject" class="span7"><div class="row"><label class="span1" for="inputTags">Tags</label><input type="text" id="inputTags" class="span3"><label class="span1" for="inputAccess" id="inputAccessLabel">access</label><input type="text"id="inputAccess" class="span3"></表单>

使用此 CSS:

#inputTags, #inputAccess {浮动:左！重要；}#inputAccessLabel {左边距:35px；右边距:5px；}

jsFiddle

I have the below code

<form id="editProfileForm" class="form-horizontal span8"  method="post">
    <div class="control-group">
        <label class="control-label" for="inputSubject">Subject</label>
        <div class="controls">
            <input type="text" id="inputSubject" class="span8" >
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="inputTags">Tags</label>
        <div class="controls">
            <input type="text" id="inputTags" class="span3">
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="inputAccess">access</label>
        <div class="controls">
            <input type="text" id="inputAccess" class="span3">
        </div>
    </div>

I am getting the form like below

Could some one suggest me how to get like below ? Thanks for your help

JS Fiddle link http://jsfiddle.net/kLuB3/331/

解决方案

form-inline would be better suited for this than form-horizontal.

Try this:

<form id="editProfileForm" class="span8 form-inline" method="post">
    <div class="row">
        <label class="span1" for="inputSubject">Subject</label>
        <input type="text" id="inputSubject" class="span7">
    </div>
    <div class="row">
        <label class="span1" for="inputTags">Tags</label>
        <input type="text" id="inputTags" class="span3">
        <label class="span1" for="inputAccess" id="inputAccessLabel">access</label>
        <input type="text"id="inputAccess" class="span3">
    </div>
</form>

With this CSS:

#inputTags, #inputAccess {
    float: left !important;
}
#inputAccessLabel {
    margin-left: 35px;
    margin-right: 5px;
}

jsFiddle

这篇关于引导表单输入字段对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-22 22:46