【发布时间】：2014-05-18 10:28:10
【问题描述】：
我正在尝试在twitter bootstrap, 中添加revealjs，它似乎出现但不正确。请注意，只是外观不对，好像从一个幻灯片跳到另一个幻灯片就好了。
有两个问题
- revealjs 幻灯片的大小非常小，我没有在 css 中更改任何可能导致此问题的内容，但我确实发现如果我不将它们与引导程序集成，幻灯片似乎看起来很好。
- revealjs 的背景填充整个屏幕，而不是放置幻灯片/部分的 div。
这就是我的屏幕的样子
这就是我的页面 html 在类 col-lg-8 中使用 twitter bootstrap 和revealjs 幻灯片部分的样子
<!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>
我将非常感谢您在这方面的任何帮助
【问题讨论】：
标签： html css twitter-bootstrap reveal.js