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列中

2 个答案: