两个相邻的 nvd3 图答案

【问题标题】：Two nvd3 graphs next to each other两个相邻的 nvd3 图
【发布时间】：2017-09-06 13:15:46
【问题描述】：

我有两个 nvd3 图表，我想在页面上并排显示它们。这是我当前的 html 代码：

<div class="container" >

  <!-- Graph 1-->
  <div class="rows">
    <nvd3 [options]="optionsGraph1" [data]="Graph1Data"></nvd3>
  </div>

  <!-- Graph 2 and 3 that should be next to each other -->
  <div class="rows">
      <div class="col-md-6"><nvd3 [options]="optionsGraph2" [data]="Graph2Data"></nvd3></div>
      <div class="col-md-6"><nvd3 [options]="optionsGraph3" [data]="Graph3Data"></nvd3></div>
  </div>

</div>

Graph2 和 Graph3 的大小可以放在一列中，但它们仍然显示在彼此下方。我正在使用 Angular 2 和引导程序 4。

提前致谢！

【问题讨论】：

我可能错了，但您只为Medium devices Desktops (≥992px) 定义了网格尝试添加其他网格 col-sx、col-sm、col-lg
不相关，但您的班级rows 应该是row。你能告诉我们 nvd3 生成什么吗？

标签： angular mean-stack nvd3.js bootstrap-4

【解决方案1】：

您的 nvd3 图形可能具有固定宽度，但信息太少，无法在不费吹灰之力的情况下查看问题所在。你能把 svg css 规则调整为 width: 100% 吗？

正如其他一些用户所注意到的，您已将 .row 容器命名为 .rows，如果这是无意的，则引导 .row 添加的 clearfix 的缺失可能会改变列的浮动方式。

【讨论】：