Question

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

{{1}}

Transpose Examples

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字段

1 个答案: