将 Cytoscape 图放在 Bootstrap 列中

Question

我有 4 Bootstrap 列：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 图（和最左边的列）不会堆叠在其他列下方（如预期的 Bootstrap 行为）。

你能给我一个详细的解决方案吗，我非常感谢你的专业知识。

Answer 1

首先在col-lg-6

中包含Cytoscape图部分

去掉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>

Answer 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

将 Cytoscape 图放在 Bootstrap 列中

Put a Cytoscape graph inside a Bootstrap column

html

css

twitter-bootstrap

cytoscape