css - Twitter Bootstrap 模式无法在移动屏幕上正常显示

Question

我已经将模态实现为弹出窗口。在桌面上它正常出现但在移动屏幕上它出现在一个 Angular 落而不是完全。模态代码

<div class="modal fade" id="loginmodal" role="dialog" style="display:none;position: fixed;top: 50%;left: 50%;margin-top: -15%;margin-left: -25%;margin-bottom: -50px;width:80%;height:80%;">
                    <div class="modal-dialog">

                        <!-- Modal content-->
                        <div class="modal-content" style="background-color: #2E5D2E;">


                            <div class="modal-body">
                                <h1 class="cover-heading" style="text-shadow: -1px 1px 1px #0A0401;font-weight: 900;font-size: xx-large;">Pick Ur Desired Location</h1>
                                <h5 class="cover-heading" style="text-shadow: -1px 1px 1px #0A0401;">We will get back to you promptly.</h5>

                                <form id="loginform" name="loginform" method="get" action="/query" class="form-horizontal">

                                    <div class="form-group">
                                        <div class="col-sm-2 control-label" style="color: #0E0E0E;white-space: nowrap;" >
                                            <label for="location" style="margin-left: 24px;">Your Location</label>
                                            <div class="col-sm-10">
                                              <select class="selectpicker form-control" id="location" name="location"  style="width: 664%;" required="true">
                                                 <option value="jaipur"  disabled="disabled" selected="selected">Jaipur</option>
                                                  <option value="shimla">Shimla</option>
                                                  <option value="bangalore">Bangalore</option>
                                                                                                  </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-2 control-label" style="margin:auto; border-radius:0;color: #0E0E0E;">
                                            <label for="username">Email Id:</label>
                                            <div class="col-sm-10">
                                            <input  name="emailId" class="form-control" id="emailId"  tabindex="1"  type="email" required="true" style="width: 664%;"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-2 control-label" style="margin:auto; border-radius:0;color: #0E0E0E;">
                                            <label for="username" style="margin-left: 5px;">Phone No:</label>
                                            <div class="col-sm-10">
                                            <input type="text" name="phoneno" id="phoneno" class="form-control ip_text" tabindex="2" style="width: 664%;"  pattern="^([0-9]{10})?$" required="required"/>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-success btn-block"> Submit Your Interest</button>
                                </form>
                            </div>

                        </div>

                    </div>
                </div>

在手机屏幕上是这样的

我怎样才能使它位于屏幕中心而不破坏它在桌面等大屏幕上的位置。有人可以建议我一些想法吗？

Answer 1

您正在应用的内联样式导致了很多问题(我删除了与大小位置相关的任何内容)并且当您只想让标签本身使用 col 时，您将输入和标签放在 col-sm-2 中-sm-2，而不是包含在这些列中的输入和标签。

<label for="location" class="col-sm-2 control-label" style="color: #0E0E0E;white-space: nowrap;">Your Location</label>

您可以使用 jQuery 将模态框保持在页面中央。

查看工作示例。

$(function() {
  function reposition() {
    var modal = $(this),
      dialog = modal.find('.modal-dialog');
    modal.css('display', 'block');
    dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
  }

  $('.modal').on('show.bs.modal', reposition);

  $(window).on('resize', function() {
    $('.modal:visible').each(reposition);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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 type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#loginmodal">Launch demo modal</button>
<div class="modal fade" id="loginmodal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content" style="background-color: #2E5D2E;">
      <div class="modal-body">
        <h1 class="cover-heading" style="text-shadow: -1px 1px 1px #0A0401;font-weight: 900;font-size: xx-large;">Pick Ur Desired Location</h1>

        <h5 class="cover-heading" style="text-shadow: -1px 1px 1px #0A0401;">We will get back to you promptly.</h5>

        <form id="loginform" name="loginform" method="get" action="/query" class="form-horizontal">
          <div class="form-group">
            <label for="location" class="col-sm-2 control-label" style="color: #0E0E0E;white-space: nowrap;">Your Location</label>
            <div class="col-sm-10">
              <select class="selectpicker form-control" id="location" name="location" required="true">
                <option value="jaipur" disabled="disabled" selected="selected">Jaipur</option>
                <option value="shimla">Shimla</option>
                <option value="bangalore">Bangalore</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="username" class="col-sm-2 control-label" style=" border-radius:0;color: #0E0E0E;">Email Id:</label>
            <div class="col-sm-10">
              <input name="emailId" class="form-control" id="emailId" tabindex="1" type="email" required="true" />
            </div>
          </div>
          <div class="form-group">
            <label for="username" class="col-sm-2 control-label" style=" border-radius:0;color: #0E0E0E;">Phone No:</label>
            <div class="col-sm-10">
              <input type="text" name="phoneno" id="phoneno" class="form-control ip_text" tabindex="2" pattern="^([0-9]{10})?$" required="required" />
            </div>
          </div>
          <button type="submit" class="btn btn-success btn-block">Submit Your Interest</button>
        </form>
      </div>
    </div>
  </div>
</div>