将 Cytoscape 图放在 Bootstrap 列中答案

【问题标题】：Put a Cytoscape graph inside a Bootstrap column将 Cytoscape 图放在 Bootstrap 列中
【发布时间】：2016-10-26 11:36:47
【问题描述】：

我有 4 个引导列：col-lg-1、col-lg-1、col-lg-4 和 col-lg-6（从左到右）。

在最大的列 (col-lg-6) 中，我想要一个 Cytoscape 图。目前我的 Cytoscape 风格如下（在<head> 部分）：

<style type="text/css">
#cy {
      height: 80%;
      width: 50%;
      position: absolute;
      left: 40%;
      top: 20%;
      background:red;
  }
</style>

然后在正文部分，我有我最左边的列：

<div id="cy" class="col-lg-6" style="background-color:grey;">
Some text 

</div>

最后，我的脚本也在 HTML 文档的正文部分：

<script type="text/javascript">
$( document ).ready(function() {

var cy = cytoscape({
    container: document.getElementById('cy'),
    .....
});

});

</script>

现在的问题是，当浏览器调整大小时，Cytoscape 图（和最左边的列）不会堆叠在其他列下方（正如引导行为中所预期的那样）。

您能否向我展示一个详细的解决方案，我非常感谢您的专业知识。

【问题讨论】：

标签： html css twitter-bootstrap cytoscape

【解决方案1】：

首先在col-lg-6

中包含Cytoscape graph section

摆脱position: absolute只需设置height: 100%

查看工作演示here

示例结构：

<!-- container-fluid : start -->
<div class="container-fluid">
  <row>
    <div class="col-sm-6">

       <----Include other stuff here----->

    </div>
    <div class="col-sm-6">

      <!-- graph : start -->
      <div class="panel panel-primary">
        <div class="panel-heading">Graph</div>
        <div class="panel-body">
          <div id="cy-container">
            <div id="cy"></div>
          </div>

        </div>
      </div>
      <!-- graph : end -->

    </div>


  </row>
</div>

【讨论】：

当我使用 panel-primary 删除 div 时，cytoscape 图也消失了。你知道为什么吗？
@KhoiBoo 我已经更新了没有面板的示例。它工作正常检查更新的演示 here。如果我的回答对您有帮助，它也会帮助其他正在寻找相同问题的人

【解决方案2】：

my screenshot

感谢您的回答。效果很好。

我通过以下方式在我的代码中调整它：

<!-- quesType -->  
<div class="col-lg-1" style="background-color:yellow;">
something bla bla bla
</div>

<!-- quesTrans -->
<div class="col-lg-1" style="background-color:pink;"> 
blabla
</div>

<!-- Editor -->
<div class="col-lg-4" style="background-color:blue;">
blablabla
</div> 

<div id="cy" class="col-lg-6  " style="background: green; ">

  <!-- graph : start -->
  <div class="panel panel-primary">
    <div class="panel-heading">Graph Khoi</div>
    <div class="panel-body">


    </div>
  </div>
  <!-- graph : end -->

</div>

这里有个小问题：我在图表上看到了节点，但是当我点击任何节点时，鼠标指针不在节点上，而是在附近的某个地方。

虽然“panel-primary”什么都不做（在我看来），但如果我删除了那个 div，那么 cytoscape 图也会消失。我的 cytoscape 初始化是带有一些节点和边缘的标准初始化。非常感谢@Joyti Pathania

【讨论】：