css - Bootstrap 3 表格 2 列

Question

我正在尝试制作一个包含 2 列的 Bootstrap 水平表单。我遇到的问题不是第二列中的所有内容都会有内容，我需要制作一个与第一列大小相同的“空白空间”。

我正在尝试让结束时间标签与开始时间标签保持一致。

<form class="form-horizontal container" role="form" name="event" ng-controller="eventFormController">
    <div class="row hidden-xs">
        <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
                <label for="selectBusinesses" class="col-sm-3 col-md-3 col-lg-2 control-label">Businesses</label>
                <div class="col-sm-5 col-md-4 col-lg-3">
                    <select id="selectBusinesses" class="form-control" ng-model="event.business" name="businesses"  ng-options=""></select>
                </div>
                <div class="col-sm-4 col-md-4 col-lg-3">
                    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
                    <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span></button>
                </div>
            </div>
            <div class="form-group">
                <label for="selectEventType" class="col-sm-3 col-md-3 col-lg-2  control-label">Event Type</label>
                <div class="col-sm-9 col-md-6 col-lg-5">
                    <select id="selectEventType" class="form-control" ng-model="event.eventType" name="eventType" ng-options=""></select>
                </div>
            </div>
            <div class="form-group">
                <label for="status" class="col-sm-3 col-md-3 col-lg-2control-label">Status</label>
                <div class="col-sm-9 col-md-6 col-lg-5">
                    {{event.status}}
                </div>
            </div>
            <div class="form-group">
                <label for="inputTopic" class="col-sm-3 col-md-3 col-lg-2 control-label">Topic</label>
                <div class="col-sm-9 col-md-6 col-lg-5">
                    <input type="text" class="form-control" id="inputTopic" ng-model="event.topic" name="topic" ng-maxlength="100" />
                </div>
            </div>
            <div class="form-group">
                <label for="inputStartTime" class="col-sm-3 col-md-3 col-lg-2 control-label">Start Time</label>
                <div class="col-sm-9 col-md-6 col-lg-5">
                    <timepicker ng-model="event.startTime" hour-step="hStep" minute-step="mStep" show-meridian="ismeridian"></timepicker>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="row"></div>
            <div class="form-group"></div>
            <span class="form-group"></span>
            <span class="form-group"></span>
            <span class="form-group"></span>
            <div class="form-group">
                <label for="inputEndTime" class="col-sm-3 col-md-3 col-lg-2 control-label">End Time</label>
                <div class="col-sm-9 col-md-6 col-lg-5">
                    <timepicker ng-model="event.endTime" hour-step="hStep" minute-step="mStep" show-meridian="ismeridian"></timepicker>
                </div>
            </div>
        </div>
    </div>
</form>

如您所见，结束时间与开始时间不匹配。我不确定解决这个问题的最佳方法是什么。我应该拆分每个表单组而不是两列吗？

Answer 1

好吧，解决这个问题并不难，我的解决方案是将每个表单组放在单独的行中，如果您希望它们内联，则可以将它们放在同一行中。这有点像 table 。

现在试试这个:

<form class="form-horizontal container" role="form" name="event" ng-controller="eventFormController">
    <div class="row">
        <div class="form-group col-md-6">
            <label for="selectBusinesses" class="col-sm-3 col-md-3 col-lg-2 control-label">Businesses</label>
            <div class="col-sm-5 col-md-4 col-lg-3">
                <select id="selectBusinesses" class="form-control" ng-model="event.business" name="businesses"  ng-options=""></select>
            </div>
            <div class="col-sm-4 col-md-4 col-lg-3">
                <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
                <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span></button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-md-6">
            <label for="selectEventType" class="col-sm-3 col-md-3 col-lg-2  control-label">Event Type</label>
            <div class="col-sm-9 col-md-6 col-lg-5">
                <select id="selectEventType" class="form-control" ng-model="event.eventType" name="eventType" ng-options=""></select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <label for="status" class="col-sm-3 col-md-3 col-lg-2control-label">Status</label>
            <div class="col-sm-9 col-md-6 col-lg-5">
                {{event.status}}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-md-6">
            <label for="inputTopic" class="col-sm-3 col-md-3 col-lg-2 control-label">Topic</label>
            <div class="col-sm-9 col-md-6 col-lg-5">
                <input type="text" class="form-control" id="inputTopic" ng-model="event.topic" name="topic" ng-maxlength="100" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-md-6">
            <label for="inputStartTime" class="col-sm-3 col-md-3 col-lg-2 control-label">Start Time</label>
            <div class="col-sm-9 col-md-6 col-lg-5">
                <timepicker ng-model="event.startTime" hour-step="hStep" minute-step="mStep" show-meridian="ismeridian"></timepicker>
            </div>
        </div>
        <div class="form-group col-md-6">
            <label for="inputEndTime" class="col-sm-3 col-md-3 col-lg-2 control-label">End Time</label>
            <div class="col-sm-9 col-md-6 col-lg-5">
                <timepicker ng-model="event.endTime" hour-step="hStep" minute-step="mStep" show-meridian="ismeridian"></timepicker>
            </div>
        </div>
    </div>
</form>