Question

我在活动管理系统网站上创建表单，以便您创建活动。该页面在Admin-LTE模板上使用Bootstrap。

我已将表单的一部分拆分为两列。右栏是输入事件空格数的部分，左侧是输入事件开始和结束日期和时间的部分。我首先编写了右侧的HTML代码，现在我正在尝试左侧，但是由于某种原因，页面上的引导行之间的空间已经改变，尽管每一方之间只有不同的是将复选框更改为数字输入（我最终会添加一个日期选择器下拉到此，但是当我之前尝试过时会出现同样的问题）以及输入命名中的其他一些更改。

任何修复它的建议都将非常感谢！

        <div class="box box-primary">
        <div class="box-body">
            <div class="input-group">
                <span class="input-group-addon">Event Title</span>
                <input type="text" class="form-control" placeholder="Event Title" id="txtEventTitle">
            </div>
            <br>
            <div class="row">
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group">
                                <span class="input-group-addon">Start Date</span>
                                <input type="number" class="form-control" placeholder="Start Date" id="dteEStart">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="input-group">
                                <span class="input-group-addon">Start Time</span>
                                <input type="number" class="form-control" placeholder="Start Time" id="timeEStart">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group">
                                <span class="input-group-addon">End Date</span>
                                <input type="number" class="form-control" placeholder="End Date" id="dteEEnd">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="input-group">
                                <span class="input-group-addon">End Time</span>
                                <input type="number" class="form-control" placeholder="End Time" id="timeEEnd">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="input-group">
                                <span class="input-group-addon">Male Spaces</span>
                                <input type="number" class="form-control" placeholder="Event Title" id="numEMaleS">
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="checkbox"><label><input type="checkbox" id="cbxEMaleS">Unlimited Spaces</label></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="input-group">
                                <span class="input-group-addon">Female Spaces</span>
                                <input type="number" class="form-control" placeholder="Event Title" id="numEFemaleS">
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="checkbox"><label><input type="checkbox" id="cbxEFemaleS">Unlimited Spaces</label></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

我已经改变了我的行和列的组织方式，因此每一侧都被分配到左列或右列之前的一行，因此复选框的高度也会影响页面的左侧。然后我决定对它们进行重新排序，以便更有意义。

                <div class="row">
                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-addon">Start Date</span>
                        <input type="number" class="form-control" placeholder="Start Date" id="dteEStart">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-addon">Start Time</span>
                        <input type="number" class="form-control" placeholder="Start Time" id="timeEStart">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-addon">End Date</span>
                        <input type="number" class="form-control" placeholder="End Date" id="dteEEnd">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-addon">End Time</span>
                        <input type="number" class="form-control" placeholder="End Time" id="timeEEnd">
                    </div>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-md-4">
                    <div class="input-group">
                        <span class="input-group-addon">Male Spaces</span>
                        <input type="number" class="form-control" placeholder="Event Title" id="numEMaleS">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="checkbox"><label><input type="checkbox" id="cbxEMaleS">Unlimited Spaces</label></div>
                </div>
                <div class="col-md-4">
                    <div class="input-group">
                        <span class="input-group-addon">Female Spaces</span>
                        <input type="number" class="form-control" placeholder="Event Title" id="numEFemaleS">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="checkbox"><label><input type="checkbox" id="cbxEFemaleS">Unlimited Spaces</label></div>
                </div>
            </div>

行中的Bootstrap怪异边缘行为

1 个答案: