Question

我有两张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和bootstrap 4。

提前致谢！

Answer 1

你的nvd3图形可能有一个固定的宽度，但是没有小提琴的信息就太少了。你能否将svg css规则调整为宽度：100％？

正如其他一些用户注意到的那样，你已将.row容器命名为.rows，如果这是无意的，那么缺少bootfix .row adds的clearfix就有可能改变列浮动的方式。 / p>

两张nvd3图表彼此相邻

1 个答案: