Question

我正在尝试使用Boostrap来布局具有水平行输入的表单（“控制行”），但标签位于上方表单输入。请参阅下面的布局以获取示例。

Boostrap可以实现吗？我试图避免使用一百万行/跨度#divs，但是如果没有很多自定义CSS，就无法找到另一种实现方法。我目前的计划是使用表格进行测试：/请保存我的命运！

LABEL1      LABEL2
| Input |   | Input |

LABEL 3
| Long input         |

LABEL 4      LABEL 5
| Input |   | Input |

Answer 1

使用控制行和控制组类的组合，我可以在不使用表的情况下完成此任务。

<div class="container">
<form>
    <div class="controls-row">
        <div class="control-group">
            <label for="first-name" class="control-label">First Name:</label>
            <div class="controls">
                <input type="text" id="first-name" name="FirstName" />
            </div>                
        </div>
        <div class="control-group">
            <label for="middle-initial" class="control-label">M.I.:</label>
            <div class="controls">
                <input type="text" id="middle-initial" name="MiddleInitial" class="input-mini" />
            </div>                
        </div>
        <div class="control-group">
            <label for="last-name" class="control-label">Last Name:</label>
            <div class="controls">
                <input type="text" id="last-name" name="LastName" />
            </div>                
        </div>
    </div>
    <div class="control-row">
         <div class="control-group">
            <label for="ssn" class="control-label">Social Security Number:</label>
            <div class="controls">
                <input type="text" id="ssn" name="SocialSecurityNumber" />
            </div>                
        </div>
        <div class="control-group">
            <label for="dob" class="control-label">Date of Birth:</label>
            <div class="controls input-append">
                <input type="text" id="dob" name="DateOfBirth" />
                <a href="#" class="btn btn-small"><i class="icon-calendar"></i></a>
            </div>
        </div>           
    </div>
</form>

为了让它正常工作（因为控制组div是display: block;，我必须覆盖该类并添加vertical-align: top;以及以下内容）：

.control-group {
    display: inline-block;
    vertical-align: top;
}

结果如下：http://jsfiddle.net/bhGyz/

如何在控件行内使用标签

1 个答案: