Bootstrap 行中奇怪的边距行为

Question

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

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

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

        <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 行中奇怪的边距行为

Bootstrap weird Margin Behavior in Rows

html

css

twitter-bootstrap

adminlte