html - 在WebSlides中嵌入Bokeh时工具栏未对齐

我正在尝试使用WebSlides将散景图嵌入到便携式html幻灯片中（请注意Reveal.js不符合我的需求）。

工具栏未对齐的情况说明如下，该问题如下：

我的步骤是：

1）我下载了WebSlides的源代码

2）运行simple Bokeh plot获取div和脚本组件

3）从WebSlides文件夹中将相关的html链接，div和脚本组件插入到“ index.html”中。使用Component Instructions散景0.12.10插入组件。 div插入到WebSlides的空白组件中。

有谁知道我如何防止工具栏未对准？任何建议，无论如何含糊，不胜感激，因为我不愿为此应用放弃Bokeh。

html文档的副本为here，下面是不包含JavaScript的代码段：

<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link
        href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.min.css"
        rel="stylesheet" type="text/css">

        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.min.js"></script>


    <BOKEH SCRIPT IS PLACED HERE>


    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">

    <!-- CSS WebSlides -->
    <link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css">

    <!-- Optional - CSS SVG Icons (Font Awesome) -->
    <link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">

  </head>
  <body>

    <main role="main">
      <article id="webslides" class="horizontal">

        <section>

          <div class="bk-root">
              <div class="bk-plotdiv" id="dac8b20e-c981-49a6-8c18-cf0ca0ddc43a"></div>
          </div>

        </section>

      </article>

    </main>

    <script src="static/js/webslides.js"></script>
    <script>
      window.ws = new WebSlides();
    </script>

    <script defer src="static/js/svg-icons.js"></script>

  </body>
</html>

最佳答案

在bokeh 0.12.11dev1中几乎从零开始重新实现了工具栏，它们不再使用易碎的float定位，因此这不应该成为问题。您可以按照我们的developer guide来开始使用bokeh的开发版本。但是，如果问题仍然存在于0.12.11dev1中，请提交issue并提供完整的可复制示例。

关于html - 在WebSlides中嵌入Bokeh时工具栏未对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47074483/