2017-09-06 7 views
-1

두 개의 nvd3 그래프가 서로 페이지 옆에 표시됩니다. 여기에 내 현재의 HTML 코드입니다 : 두 개의 서로 인접한 nvd3 그래프

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

그래프 2와 그래프 3 그러나 그들은 여전히 ​​서로 아래에 표시되는 컬럼에 딱 맞는 크기를 가지고있다. 각도 2와 부트 스트랩 4를 사용하고 있습니다.

미리 감사드립니다!

+0

'중간 장치 데스크톱 (≥992px)'에 대한 그리드 만 정의했습니다. 다른 그리드를 추가하십시오. col-sx, col-sm, col-lg – mxr7350

+0

클래스'rows'는'row '. nvd3가 생성하는 것을 보여줄 수 있습니까? – 12seconds

답변

0

너의 nvd3 그래프의 너비는 고정되어 있지만, 바이올린 없이는 무엇이 잘못되었는지 알 수있는 정보가 너무 적습니다. svg CSS 규칙을 너비 : 100 %로 조정할 수 있습니까?

다른 일부 사용자는 .row 컨테이너를 .rows로 명명했는데, 의도하지 않은 경우 부트 스트랩 .row가 추가되는 clearfix가 없으면 열이 떠있는 방식이 변경 될 수 있습니다.