0
ブートストラップ・モーダルの内側に水平なフォームを作成しようとしています。水平型のブートストラップ・モーダル
私が何をしようとしても、ラベルはフォーム要素の上にあります。私はそれが何か単純なものでなければならないことを知っていますが、私が考えることができるすべてを試しました。
これは私が現時点で持っているものです。
<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/
助けてください。
手掛かり：ウィンドウのサイズを変更し、あなたが遊んでメディアクエリがあることがわかります。問題は '.col-XX'です。あなたは 'sm'を使っています。それらを変更しようとしましたか？ – ProEvilz