具有水平形式的自舉模態

Question

我正在嘗試在引導模態中獲取水平形式。

不管我做什么，標簽都在表單元素上方。 我知道這一定很簡單，但是我已經嘗試了所有我能想到的東西。

這就是我目前所擁有的。

<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">&times;</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/

請幫忙。

Answer 1

這是因為您的窗口/屏幕尺寸。 您使用了.col-sm但應使用.col-xs作為基礎，因為xs用於最小的設備。

始終以.col-xs開頭，然后如果在更大的設備尺寸（例如筆記本電腦）上需要其他功能，則可以引入其他類，例如.col-sm或.col-md等。

Bootstrap 首先是移動設備 。 在使用sm ，您使用的設備可能不屬於該類別。

有關Bootstrap網格類的更多信息，請參見此處 。

 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">&times;</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>