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

标签 css twitter-bootstrap

我有

<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/

我想为姓氏添加标签,所以我只想为名字和姓氏添加标签。 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/

但它增加了额外的边距样式。

最佳答案

像这样:

<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>

关于css - 如何在 Bootstrap 表单上正确对齐没有标签的字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12795592/

相关文章:

css - Bootstrap : Floated divs cause parent elements to collapse. 构建嵌套列的最佳方式?

html - 固定 parent ,把它放在 child 的右边

javascript - 谷歌地图灰色 map

css - 我可以在 style 属性中指定 CSS 媒体类型吗?

javascript - Mobile Safari 视差滚动不起作用

HTML/CSS : Reverse responsive grid behavior in bootstrap3

php - 如何在 mPDF 中使用 bootstrap?

javascript - Bootstrap 导航下拉菜单不起作用

css - 如何在CSS中选择Parent Div

javascript - 导航栏已扩展但有一个子菜单总是折叠