Bootstrap 3:响应式HTML弹出窗口

Question

如何使用Bootstrap 3制作响应式HTML弹出窗口？

HTML,

<div class="center-pane">

  <div class="pane-left">
    Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.
  </div>

  <div class="pane-right">

    <form method="post" action="/login/">
      <div class="form-group">
        <label class=" required-field">E-Mail:</label>
        <input type="text" name="username" required id="id_username" class="form-control" maxlength="150">
      </div>
      <div class="form-group">
        <label class=" required-field">Password:</label>
        <input type="password" name="password" required class="form-control" id="id_password">
      </div>
      <button type="submit" class="btn btn-default btn-primary btn-block" value="Login">Login</button><br>
      <a href="/omg">I'm desperated!</a>
    </form>
    <div class="misc text-center">
      Some text
      <br>
      <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> |
      <a href="http://validator.w3.org/check/referer">HTML5</a>
    </div>
  </div>


</div>

CSS,

/* HTML POPUP
-------------------------------------------------- */
.center-pane {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  max-width: 1000px;
  height: 320px;
  border:1px solid red;
}

.pane-left,
.pane-right{
    width:480px;
    float:left;
    border:1px solid blue;
}

.center-pane我调整浏览器窗口大小时响应.但不.pane-left和 .pane-right-怎样才能让这两个反应呢？

编辑:

如果我使用该模型的解决方案,似乎需要解决的问题更多:

      <!-- Button trigger modal -->
<button 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" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

默认情况下,model对话框不是绝对垂直居中 - 我该如何更改？另外,如何更改对话框的大小呢？我需要两列 - 一个在左边,一个在右侧以便响应.模型如何帮助我做到这一点.我在bootstrap网站的文档中看不到它.我会尽量避免通过js进行任何自定义.

此外,您需要单击按钮才能触发对话框.我不想使用按钮来获取对话框,我想在加载html文档时获取弹出窗口.可能吗？

Answer 1

当浏览器调整大小以使其响应时，左窗格和右窗格的宽度必须动态更改！

但是如果你为它提供固定宽度，例如width:value in px. 浏览器调整大小不会对 div 产生任何影响！

我建议您使用BOOTSTRAP POPUP COMPONENTS的内置类..

了解有关BOOTSTRAP MODAL POPUPS的更多信息->这里