Question

我正在尝试制作一个带有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>

offset

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

Answer 1

好吧，解决这个问题并不是那么困难，我的解决方案是将每个表单组放在不同的行中，如果你想让它们是内联的，你可以将它们保持在同一行。这就像桌子。

现在试试这个：

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

Bootstrap 3形成2列

1 个答案: