Javascript 引导程序3：响应式HTML弹出窗口

如何使用Bootstrap3创建响应性HTML弹出窗口

HTML

.center pane

在我调整浏览器窗口大小时会做出响应。但不是

。左窗格

和

.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>

启动演示模式
&时代；
情态标题
...
接近
保存更改

默认情况下，

模型

对话框不是绝对的垂直居中-如何更改？另外，我如何更改对话框的大小？我需要两列–一列在左边，一列在右边以响应。模型如何帮助我做到这一点。我在bootstrap网站的文档中看不到它。不过，我会尽量避免通过js进行任何定制

---

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

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

但是如果您为它提供了一个固定的宽度，比如px中的

width:value

。浏览器大小调整不会对div产生任何影响

我建议您使用引导弹出组件的内置类

---

了解有关引导模式弹出窗口的更多信息->

使用columns方法获得了我自己的解决方案-

col col-xs-6

<div class="pane-left col col-xs-6">
 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 col col-xs-6">
....

</div>

将此文档用作快速启动任何新项目的一种方式。
您得到的只是此文本和一个基本上没有内容的HTML文档。
....

为什么不使用引导模式？谢谢请看我的编辑上面。

      <!-- 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>

<div class="pane-left col col-xs-6">
 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 col col-xs-6">
....

</div>