在 WebSlides 中嵌入散景时工具栏未对齐答案

【问题标题】：Toolbar misaligned when embedding Bokeh in WebSlides在 WebSlides 中嵌入散景时工具栏未对齐
【发布时间】：2018-04-14 22:17:51
【问题描述】：

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

问题如下图所示，工具栏未对齐：

我的步骤是：

1) 我下载了WebSlides的源代码

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

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

有谁知道我可以如何防止工具栏错位？任何建议，无论多么含糊，都值得赞赏，因为我不愿意为此应用程序放弃 Bokeh。

html 文档的副本是here，下面是没有 javascript 的 sn-p：

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

【问题讨论】：

从外观上看，您的图标是浮动的，并且在它们试图包装的容器中具有足够的宽度？很难说不看你的代码。你能发布一个复制问题的工作示例吗？这确实是这里任何人解决问题的唯一方法。
感谢您的快速回复！我已经添加了代码。该 css 位于 WebSlides 附带的另一个文件中。有趣的是你所说的包装。也许是 Bokeh 和 WebSlides 之间的 CSS 冲突？

标签： html css bokeh

【解决方案1】：

工具栏在散景 0.12.11dev1 中几乎从头开始重新实现，它们不再使用脆弱的float 定位，所以这应该不是问题。您可以关注我们的developer guide，让您开始使用开发版散景。但是，如果问题在 0.12.11dev1 中仍然存在，请提交 issue 并附上完整、可重现的示例。

【讨论】：