同一行上的引导字段

Question

有谁知道为什么我的“终止日期”字段与雇用日期不在同一行？当我遵循与上述所有字段相同的规则时？

<h1>Employee</h1>
<fieldset>
    <h2>Employee Information</h2>
    <div class="row">
        <div class="col-lg-6">
            <div class="form-group">
                <label>Name</label>
                <input id="name" name="name" type="text" class="form-control required">
            </div>
            <div class="form-group">
                <label>Date</label>
                <input id="todaysDate" name="todaysDate" type="text" class="form-control required">
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <label>Job Title</label>
                <input id="title" name="title" type="text" class="form-control required email">
            </div>
            <div class="form-group">
                <label>Department</label>
                <input id="department" name="department" type="text" class="form-control">
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <label>Date Hired</label>
                <input id="hiredDate" name="hiredDate" type="text" class="form-control required email">
            </div>
            <div class="form-group">
                <label>Termination Date</label>
                <input id="termDate" name="termDate" type="text" class="form-control">
            </div>
        </div>
    </div>
</fieldset>

Answer 1

你的结构是错误的，为了完成你想要的代码应该是：

<h1>Employee</h1>
<fieldset>
    <h2>Employee Information</h2>
    <div class="row">
        <div class="col-lg-6">
            <div class="form-group">
                <label>Name</label>
                <input id="name" name="name" type="text" class="form-control required">
            </div>
            <div class="form-group">
                <label>Date</label>
                <input id="todaysDate" name="todaysDate" type="text" class="form-control required">
            </div>
            <div class="form-group">
                <label>Date Hired</label>
                <input id="hiredDate" name="hiredDate" type="text" class="form-control required email">
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <label>Job Title</label>
                <input id="title" name="title" type="text" class="form-control required email">
            </div>
            <div class="form-group">
                <label>Department</label>
                <input id="department" name="department" type="text" class="form-control">
            </div>
            <div class="form-group">
                <label>Termination Date</label>
                <input id="termDate" name="termDate" type="text" class="form-control">
            </div>
        </div>
    </div>
</fieldset>

通过这种方式，您有 1 行 2 列（每列 3 个输入），因此当折叠时，第一列元素将显示在第二列元素之前（因此 之前的元素正确的）。

但如果在折叠时您需要在底部元素之前显示顶部元素，您可能需要执行以下操作：

<h1>Employee</h1>
<fieldset>
    <h2>Employee Information</h2>

    <div class="row">
        <div class="col-lg-6">
            <div class="form-group">
                <label>Name</label>
                <input id="name" name="name" type="text" class="form-control required">
            </div>
            <div class="form-group">
                <label>Job Title</label>
                <input id="title" name="title" type="text" class="form-control required email">
            </div>
        </div>
        <div class="col-lg-6">

        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <div class="form-group">
                <label>Date</label>
                <input id="todaysDate" name="todaysDate" type="text" class="form-control required">
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <label>Department</label>
                <input id="department" name="department" type="text" class="form-control">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <div class="form-group">
                <label>Date Hired</label>
                <input id="hiredDate" name="hiredDate" type="text" class="form-control required email">
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <label>Termination Date</label>
                <input id="termDate" name="termDate" type="text" class="form-control">
            </div>
        </div>
    </div>

</fieldset>

您将拥有 3 行，每行 2 列（每列 1 个输入）。