使用Bootstrap 3的网格系统

Question

我有下一个HTML：

<div class="row">
        <div class="form-group">
            <label class="control-label col-md-3">Date:</label>
            <div class="col-md-4">
                <input type="text" name="date" id="txtDate" runat="server" clientidmode="Static" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">Parent or Guardian Name:</label>
            <div class="col-md-4">
                <input type="text" name="parent_name" id="txtParentName" runat="server" clientidmode="Static" class="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">Email:</label>
            <div class="col-md-4">
                <input type="text" name="email" id="txtEmail" runat="server" clientidmode="Static" class="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">Address:</label>
            <div class="col-md-4">
                <input type="text" name="address" id="txtAddress" runat="server" clientidmode="Static" class="form-control" />
            </div>
        </div>
    </div>

它呈现一些联系形式（表单的一部分）。结果看起来像

我想以某种方式跳过仍然存在于行中的空格（我使用col-md-3表示标签，使用col-md-4作为输入。结果只有7个中的7个。）我尝试使用offset和push但这没有用，因为offset在页面中心显示标签，push在视口外显示标签。

Answer 1

使用clearfix上的课程form-groups将每个元素保留在每个元素中：

<div class="form-group clearfix">

BootplyDemo