我试图在bootstrap模态中获得一个水平形式。
无论我尝试做什么，标签都在表单元素之上。我知道它一定很简单，但我已经尝试了所有我能想到的东西。
这就是我现在所拥有的。
<div class="modal fade" id="newEventModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body form-horizontal">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="title" class="control-label col-sm-2">Title</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="title">
</div>
</div>
<div class="form-group">
<label for="end" class="control-label col-sm-2">End</label>
<div class="col-sm-10">
<div class='input-group date' id='datetimepickerend'>
<input type='text' class="form-control" id='end' />
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="allday" class="control-label col-sm-2">All day event</label>
<div class="col-sm-10">
<input type="checkbox" class="form-control" id="allday">
</div>
</div>
<div class="form-group">
<label for="description" class="control-label col-sm-2">Description</label>
<div class="col-sm-10">
<textarea class="form-control" id="description"></textarea>
</div>
</div>
<div class="form-group">
<label for="wwner" class="control-label col-sm-2">Owner</label>
<div class="col-sm-10">
<select name='owner'>
<option>Agent A</option>
<option>Agent B</option>
<option>Agent C</option>
<option>Agent D</option>
<option></option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
http://jsfiddle.net/1aeur58f/868/
请帮忙。
答案 0 :(得分：1)
这是因为你的窗口/屏幕尺寸。您使用.col-sm，但应使用.col-xs作为基础，因为xs适用于最小的设备。
始终以.col-xs开头，然后如果您需要更大设备尺寸的不同功能（例如笔记本电脑），那么您可以介绍其他类，例如.col-sm或.col-md等。< / p>
Bootstrap mobile first 。虽然您使用了sm，但您可能正在使用不属于该类别的设备。
有关Bootstrap网格类的更多信息，请参阅here。
jQuery(document).ready(function(e) {
jQuery('#mymodal').trigger('click');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body form-horizontal">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="title" class="control-label col-xs-2">Title</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="title">
</div>
</div>
<div class="form-group">
<label for="start" class="control-label col-xs-2">Start</label>
<div class="col-xs-10">
<div class='input-group date' id='datetimepickerstart'>
<input type='text' class="form-control" id='start' />
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="end" class="control-label col-xs-2">End</label>
<div class="col-xs-10">
<div class='input-group date' id='datetimepickerend'>
<input type='text' class="form-control" id='end' />
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="allday" class="control-label col-xs-2">All day event</label>
<div class="col-xs-10">
<input type="checkbox" class="form-control" id="allday">
</div>
</div>
<div class="form-group">
<label for="timezone" class="control-label col-xs-2">Timezone</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="timezone">
</div>
</div>
<div class="form-group">
<label for="repeat" class="control-label col-xs-2">Repeat</label>
<div class="col-xs-10">
<select name='repeat'>
<option>Never</option>
<option>Daily</option>
<option>Weekly</option>
<option>Monthly</option>
<option>Annually</option>
</select>
</div>
</div>
<div class="form-group">
<label for="description" class="control-label col-xs-2">Description</label>
<div class="col-xs-10">
<textarea class="form-control" id="description"></textarea>
</div>
</div>
<div class="form-group">
<label for="wwner" class="control-label col-xs-2">Owner</label>
<div class="col-xs-10">
<select name='owner'>
<option>Agent A</option>
<option>Agent B</option>
<option>Agent C</option>
<option>Agent D</option>
<option></option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>