Question

我有

<form action="#" method="post" class="well">
    <fieldset>
        <div class="control-group">
            <label class="control-label" for="FirstName">Name</label>
            <div class="controls row-fluid">
                <div class="span2 row">
                    <input class="span12" id="FirstName" name="FirstName" placeholder="Firstname" type="text" value=""/>
                </div>
                <div class="span2 row">
                    <input class="span12" id="MiddleName" name="MiddleName" placeholder="Middlename" type="text" value=""/>
                </div>
                <div class="span2 row">
                    <input class="span12" id="LastName" name="LastName" placeholder="Lastname" type="text" value=""/>
                </div>
            </div>
        </div>
    </fieldset>
</form>

jsfiddle：http://jsfiddle.net/bWGfb/

我想为Last Name添加标签，所以我想只为First和Last Name设置标签。如何使用bootstrap？

更新我可以做出类似的事情：

<div class="row-fluid">
    <div class="span12">
        <div class="span4">
            <label>First Name</label>
            <input type="text" class="span12" placeholder="First Name">
        </div>
        <div class="span4" style="margin-top: 25px;">
            // field without label
            <input type="text" class="span12" placeholder="Last Name">
        </div>
        <div class="span4 ">
            <label>First Name</label>
            <input type="text" class="span12" placeholder="Last Name">
        </div>
    </div>
</div>

http://jsfiddle.net/bWGfb/1/

但它增加了额外的保证金风格。

Answer 1

这样的事情：

<form action="#" method="post" class="well">
    <fieldset>
        <div class="control-group">
            <div class="row-fluid">
                <div class="span3">
                    <label for="FirstName">First name</label>
                    <input class="span12" id="FirstName" name="FirstName" placeholder="Firstname" type="text" value=""/>
                </div>
                <div class="span3">
                    <label for="MiddleName">&nbsp;</label>
                    <input class="span12" id="MiddleName" name="MiddleName" placeholder="Middlename" type="text" value=""/>
                </div>
                <div class="span3">
                    <label for="LastName">Last name</label>
                    <input class="span12" id="LastName" name="LastName" placeholder="Lastname" type="text" value=""/>
                </div>
            </div>
        </div>
    </fieldset>
</form>

Answer 2

在您自己的CSS中覆盖label（第946行）中的bootstrap.css样式

它有5px底部边距，只需将其设置为您需要的，但是间隔很小;）

如何在bootstrap表单上正确对齐没有标签的字段

2 个答案: