Question

我正在尝试在revealjs内添加twitter bootstrap,它似乎出现但不正确。请注意，它只是外观不对，似乎从幻灯片跳到滑动就好了。

它有两个问题

revealjs幻灯片的大小非常小，我没有改变任何可能导致这种情况的内容，但我确实发现如果我不将它们与bootstrap集成，幻灯片看起来似乎很好。
revealjs的背景填充整个屏幕，而不是放置幻灯片/部分的div。

这就是我的屏幕 enter image description here

这是我的页面html在twitter col-lg-8

    <!DOCTYPE html>
<html lang="en">

<head>


    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Multi Form</title>


    <!-- Bootstrap core CSS -->
    <link href="assets/bootstrap-3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/design.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="assets/reveal.js-2.6.2/css/reveal.min.css">
    <link rel="stylesheet" href="assets/reveal.js-2.6.2/css/theme/default.css" id="theme">

    <!-- For syntax highlighting -->
    <link rel="stylesheet" href="assets/reveal.js-2.6.2/lib/css/zenburn.css">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]>
    <script src="assets/bootstrap-3.1.1/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- If the query includes 'print-pdf', include the PDF print sheet -->
    <script>
        if (window.location.search.match(/print-pdf/gi)) {
            var link = document.createElement('link');
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = 'css/print/pdf.css';
            document.getElementsByTagName('head')[0].appendChild(link);
        }
    </script>

    <!--[if lt IE 9]>
    <!--<script src="assets/reveal.js-2.6.2/lib/js/html5shiv.js"></script>-->
    <![endif]-->
</head>

<body>

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="">Form Generator</a></li>
                <li><a href="">Support</a></li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</div>

<div class="container main-wrapper">

    <div class="row">
        <div class="col-lg-2">

        </div>
        <div class="col-lg-8">
            <h3>This is a test and test is something that should be taken seriusly</h3>

            <div class="reveal">

                <!-- Any section element inside of this container is displayed as a slide -->
                <div class="slides">
                    <section>
                        <h1>Reveal.js</h1>

                        <h3>HTML Presentations Made Easy</h3>

                        <p>
                            <small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a
                                    href="http://twitter.com/hakimel">@hakimel</a></small>
                        </p>
                    </section>


                    <section>
                        <h2>Slides</h2>

                        <p>
                            Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it
                            out at <a
                                href="http://slid.es" target="_blank">http://slid.es</a>.
                        </p>
                    </section>


                </div>

            </div>
        </div>
        <div class="col-lg-2">
        </div>
    </div>

</div>
<!-- /.container -->

<script src="assets/bootstrap-3.1.1/js/bootstrap.min.js"></script>
<script src="assets/reveal.js-2.6.2/lib/js/head.min.js"></script>
<script src="assets/reveal.js-2.6.2/js/reveal.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


<script>

    // Full list of configuration options available here:
    // https://github.com/hakimel/reveal.js#configuration
    Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,

        theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
        transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none

        // Parallax scrolling
        //parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
        //parallaxBackgroundSize: '2100px 900px',

        // Optional libraries used to extend on reveal.js
        dependencies: [
            { src: 'assets/reveal.js-2.6.2/lib/js/classList.js', condition: function () {
                return !document.body.classList;
            } },
            { src: 'assets/reveal.js-2.6.2/plugin/markdown/marked.js', condition: function () {
                return !!document.querySelector('[data-markdown]');
            } },
            { src: 'assets/reveal.js-2.6.2/plugin/markdown/markdown.js', condition: function () {
                return !!document.querySelector('[data-markdown]');
            } },
            { src: 'assets/reveal.js-2.6.2/plugin/highlight/highlight.js', async: true, callback: function () {
                hljs.initHighlightingOnLoad();
            } },
            { src: 'assets/reveal.js-2.6.2/plugin/zoom-js/zoom.js', async: true, condition: function () {
                return !!document.body.classList;
            } },
            { src: 'assets/reveal.js-2.6.2/plugin/notes/notes.js', async: true, condition: function () {
                return !!document.body.classList;
            } }
        ]
    });

</script>

</body>
</html>

我将非常感谢您提供的任何帮助

Answer 1

我有类似的问题。当揭示计算包装纸高度时，结果证明这是一个问题。尝试更改reveal.js中函数layout()中的availableHeight变量。

替换availableHeight = dom.wrapper.offsetHeight;

使用availableHeight = Math.max(dom.wrapper.clientHeight, window.innerHeight || 0);

revealjs在twitter bootstrap中没有正确调整

1 个答案: