CSS Bootstrap 3 形式 2 列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23548835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 form 2 columns
提问by willJk
I'm trying to make a bootstrap horizontal form with 2 columns. The issue i'm running into is not everything on the second column is going to have something and I need to make an "empty space" of the size of the first column.
我正在尝试使用 2 列制作一个引导程序水平形式。我遇到的问题不是第二列上的所有内容都会有一些东西，我需要创建一个与第一列大小相同的“空白空间”。
I'm trying to have the end time label be inline with the start time label.
我试图让结束时间标签与开始时间标签一致。
<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>
As you can see the End time doesn't match up with the start time. I'm unsure what the best way to approach this. Should I split each form-group instead of having two columns?
如您所见，结束时间与开始时间不匹配。我不确定解决这个问题的最佳方法是什么。我应该拆分每个表单组而不是两列吗？
回答by Moeen MH
Okay, it's not so diffucult to solve this issue, my solution would be putting each form-group in separate rows and if you want them to be inline, you can just keep them in the same row. That's something like table.
好的，解决这个问题并不难，我的解决方案是将每个表单组放在单独的行中，如果您希望它们内联，则可以将它们放在同一行中。这有点像桌子。
Now try this :
现在试试这个：
<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>
