html - 在行中 Bootstrap 奇怪的边距行为

Question

我正在我的事件管理系统网站上创建一个表单，以允许您创建事件。该页面在 Admin-LTE 模板上使用 Bootstrap。

我已将部分表格分成两列。右栏是输入事件空格数的部分，左侧是输入事件开始和结束日期和时间的部分。我首先为右侧编写了 HTML 代码，现在正在尝试编写左侧，但是由于某种原因，页面上 Bootstrap 行之间的空间发生了变化，尽管每一侧之间的唯一不同是将复选框更改为数字输入(我最终会为此添加一个日期选择器下拉菜单，但是我之前尝试时出现了同样的问题)和输入命名的其他一些更改。

如有任何修复建议，我们将不胜感激!

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