Css Bootstrap 3表单2列

我正在尝试制作一个有两列的引导水平表单。我遇到的问题不是第二列的所有内容都会有内容，我需要创建一个与第一列大小相同的“空白”

我试图让结束时间标签与开始时间标签保持一致

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

企业
事件类型
地位
{{event.status}
话题
开始时间
结束时间

---

正如您所看到的，结束时间与开始时间不匹配。我不确定最好的方法是什么。我应该拆分每个表单组而不是两列吗？

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

现在试试这个：

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

企业
事件类型
地位
{{event.status}
话题
开始时间
结束时间

用css PleaseEyes将其放在一个表格组中。如果您想在左右垂直对齐输入，则应拆分每个

表格组。每个
col
类都有预定义的大小，因此很容易将2个col对齐到2个不同的行中。但是
行
没有高度，因此（默认情况下）不可能将两行对齐到两个不同的列中。由于信息有限，很难解决这个问题，但我认为包装器可以在这里工作。用
位置：相对包裹整个表单；宽度：100%；高度：自动然后对于结束时间组设置
位置：绝对；底部：0；右：0可能？我得到了下面的答案。谢谢，我尝试了这一点，每行都没有行。这正是我想要的。干杯