Zwei nvd3 Graphen nebeneinander

Question

Ich habe zwei nvd3 Graphen, die ich gerne nebeneinander auf der Seite zeigen würde. Hier ist mein aktueller HTML-Codes:

<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 und Graph3 haben eine Größe, die jedoch in einer Spalte passen würde sie immer noch untereinander angezeigt werden. Ich benutze Angular 2 und Bootstrap 4.

Vielen Dank im Voraus!

Answer 1

Ihr nvd3-Diagramm hat wahrscheinlich eine feste Breite, aber es gibt zu wenige Informationen, um ohne Geige zu sehen, was schief läuft. Können Sie die SVG-CSS-Regel auf width: 100% einstellen? Wie ein anderer Benutzer bemerkt hat, haben Sie den .row-Container als .rows benannt. Wenn dies nicht beabsichtigt ist, besteht die Möglichkeit, dass das Fehlen von clearfix, das bootstrap .row hinzufügt, die Art und Weise ändert, wie Spalten schweben.