剑道角图

Question

我试着把剑道角图并排放，但它们一直在堆叠。我使用的引导-col 6，并尝试了其他风格，但剑道图表元素不尊重任何东西，他们继续占据整个排和堆叠。删除style=“显示:内联块；”仍然不能工作。下面是我在html中得到的内容：

<div class="col-md-12">
    <div class="col-md-6" style="display:inline-block;">
            <kendo-chart [categoryAxis]="{ categories: categories }">
                    <kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
                    <kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
                    <kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
                    <kendo-chart-series>
                        <kendo-chart-series-item *ngFor="let item of series"
                            type="line" [data]="item.data" [name]="item.name">
                        </kendo-chart-series-item>
                    </kendo-chart-series>
                </kendo-chart>
    </div>
    <div class="col-md-6" style="display:inline-block;">
            <kendo-chart>
                    <kendo-chart-value-axis>
                        <kendo-chart-value-axis-item [title]="{ text: 'Miles' }"
                                                     [min]="0" [max]="100">
                        </kendo-chart-value-axis-item>
                    </kendo-chart-value-axis>
                    <kendo-chart-category-axis>
                        <kendo-chart-category-axis-item [categories]="categories2">
                        </kendo-chart-category-axis-item>
                    </kendo-chart-category-axis>
                    <kendo-chart-series>
                      <kendo-chart-series-item [data]="series2" type="line">
                      </kendo-chart-series-item>
                    </kendo-chart-series>
                  </kendo-chart>
    </div>
</div>

Answer 1

"col-md-6“元素需要位于具有class=”行“的元素中，才能使引导布局工作：

自举网格系统

 <div class="row">
    <div class="col-md-6">
            <kendo-chart [categoryAxis]="{ categories: categories }">
                    <kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
                    <kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
                    <kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
                    <kendo-chart-series>
                        <kendo-chart-series-item *ngFor="let item of series"
                            type="line" [data]="item.data" [name]="item.name">
                        </kendo-chart-series-item>
                    </kendo-chart-series>
                </kendo-chart>
    </div>
    <div class="col-md-6">
           <kendo-chart [categoryAxis]="{ categories: categories }">
                    <kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
                    <kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
                    <kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
                    <kendo-chart-series>
                        <kendo-chart-series-item *ngFor="let item of series"
                            type="line" [data]="item.data" [name]="item.name">
                        </kendo-chart-series-item>
                    </kendo-chart-series>
                </kendo-chart>
    </div>
</div>

示例