Twitter bootstrap 表单布局的正确方法

我有以下代码：

<div class="col-sm-5 content">
        <h2>Network Configuration</h2>      
        <div class="modal-body">
            <div class="checkbox">
                <label><input type="checkbox" id="cbDhcp" value="">DHCP enabled</label>
            </div>

            <p>IP Address</p>
            <input type="text" class="input" id="inpIpAddress">

            <p>Netmask</p>
            <input type="text" class="input" id="inpNetmask">

            <p>Broadcast</p>
            <input type="text" class="input" id="inpBroadcast">


            <p>Gateway</p>
            <input type="text" class="input" id="inpGateway">
        </div>
        <div class="modal-footer">      
            <button class="btn btn-primary" onclick="btnSave_Click()">Save</button>
        </div>
    </div>  

网络配置
启用DHCP
IP地址

网络掩码

广播

网关

拯救

但是，它的布局不是很好。主要问题是，标签更接近其上方的输入，而不是“所属”的输入：

---

如何正确布局这样的表单？

将表单包装在表单标签中。 给它一个“表单控制”类。

---

使用“form Group”类对输入进行分组。

表单控件

没有达到我预期的效果，但其余的都可以。