2

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

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

4

2 回答 2

0

我的截图

感谢您的回答。它真的很好用。

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

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

于 2016-10-26T14:06:24.463 回答
0

首先包括col-lg-6内的Cytoscape 图形部分

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

在此处查看工作演示

样本结构：

<!-- 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>
于 2016-10-26T12:09:58.540 回答