twitter-bootstrap-3 - Bootstrap 网格布局内的 Reveal.js 幻灯片

Question

是否可以将reveal.js演示文稿(或单个幻灯片)集成到引导网格布局(使用单个页面，无iframe)中，以便页面的reveal部分仅占据一半网页大小？

我想做这样的事情:

<div class="container">
    <div class="col-md-6">
        <p>normal page content (not part of the reveal.js presentation)</p>
        <button type="button" class="btn-primary">bootstrap button</button>
    </div>
    <div class="col-md-6">
        <div class="reveal">
            <div class="slides">
                <section>
                    <h1>My Slide</h1>
                </section>
            </div>
        </div>
    </div>
</div>

我得到的是一个未显示幻灯片且引导样式已损坏的页面。不知何故，我需要隔离两个 css 样式表。

看起来，reveal.js 幻灯片总是完全填满浏览器窗口/页面(并且仅在浏览器窗口调整大小时进行缩放/缩放以适应页面大小)

到目前为止我尝试过的:

• 设置显示演示文稿的宽度和高度(这没有效果)
• 将页面的 Reveal.js 部分放入 iframe 中。这可行，但我无法通过 angularjs 加载数据。

Answer 1

检查 CSS 输出后发现，reveal.js 似乎根据您的窗口大小为幻灯片提供了固定值。例如:宽度:960px；高度:700 像素；缩放:1.26309；

Bootstrap 还尝试通过容器 div 设置内容的固定宽度。对于上面的示例屏幕尺寸，它使用:@media(最小宽度:1200px).container {宽度:1170px;}

因此它试图将 1170px 容器放入 960px 幻灯片中(缩放至填满屏幕)，这会导致问题。在这个简单的示例中，删除容器 div 可以修复此问题: