html - 使用 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 of 12.) 我尝试使用 offset 和 push 但这没有帮助，因为 offset 在页面中心显示标签并且 push 将标签显示在视口(viewport)之外。

Answer 1

在您的form-groups 上使用类clearfix 来保留每个组的元素:

<div class="form-group clearfix">

BootplyDemo