css - 如何在控制行内使用标签

Question

我正在尝试使用 Boostrap 来布局具有水平行输入(即“控制行”)但标签位于表单输入上方的表单。有关示例，请参见下面的布局。

Boostrap 可以做到这一点吗？我试图避免求助于一百万行/span# div，但如果没有大量自定义 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/