使用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用於輸入。結果僅是12個中的7個。）我嘗試使用offset和push但這無濟於事，作為offset顯示標簽在頁面中心，然后push標簽顯示在視口之外。

Answer 1

在form-groups上使用類clearfix將每個元素保留在其中：

 <div class="form-group clearfix"> 

BootplyDemo