正确的布局表单的方法

Question

我有以下代码：

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

但是，它并不是非常好的。主要问题是，标签更接近它们上面的输入，而不是输入'属于'：

我应该如何正确布局这样的表格？

Answer 1

将表单换成表单标记。 给它“表单控制”类。 使用“表单组”类对输入进行分组。