隣り合う2つのnvd3グラフ

Question

私は、ページ上で隣り合って表示したい2つの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は、しかし、彼らはまだお互いの下に表示されている列に収まるようにサイズを有しています。私は角度2とブートストラップ4を使用しています。

ありがとうございます！

Answer 1

あなたのnvd3グラフの幅は固定されている可能性がありますが、フィドルなしで何がうまくいかないかを知るには情報が少なすぎます。 svgのCSSルールを幅：100％に調整できますか？

.rowコンテナに.rowsという名前が付けられています。意図しない場合は、ブートストラップ.rowが追加されていることによって、列の浮動方法が変更される可能性があります。