0

我正在我的活动管理系统网站上创建一个表单，以允许您创建活动。该页面在 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>
4

1 回答 1

0

我已经切换了行和列的组织方式，以便将每一侧分配到左列或右列之前的一行，因此复选框的高度也会影响页面的左侧。然后我决定重新订购它们，这样更有意义。

                <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>
于 2017-03-01T20:30:55.307 回答