Bootstrap 字段在同一行

Question

有谁知道为什么我的 "termination Date" 字段与聘用日期不在同一行？当我遵循与上述所有字段相同的规则时？

<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 个输入）。

Bootstrap 字段在同一行

Bootstrap fields on same line

twitter-bootstrap

jquery-steps