Kendo UI可排序组件不起作用

Question

我想要一个水平可排序列表，就像他们在此链接上的演示中一样：https://www.telerik.com/kendo-angular-ui/components/sortable/

当我尝试使其在我的应用程序上运行时，它呈现为一列项目。我不知道为什么，但是我认为这与容器流体类和媒体断点不起作用有关。

复制步骤：

ng new notes
ng add @progress/kendo-angular-sortable

复制演示代码

notes.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-notes',
  templateUrl: './notes.component.html',
  styleUrls: ['./notes.component.css'],
  encapsulation: ViewEncapsulation.None,

})
export class NotesComponent implements OnInit {

  public items: string[] = [
    'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'
  ];

  constructor() { }

  ngOnInit() {
  }

}

notes.component.html

<div class="container-fluid">
  <kendo-sortable [kendoSortableBinding]="items" [navigatable]="true" [animation]="true" class="row"
    itemClass="item col-xs-6 col-sm-3" activeItemClass="item col-xs-6 col-sm-3 active">
  </kendo-sortable>
</div>

notes.component.css

.item {
    background-color: #bfe7f9;
    color: #1494d0;
    border: 1px solid #fff;
    height: 70px;
    line-height: 68px;
    font-size: 16px;
    text-align: center;
    outline: none;
    cursor: move;
}

.item:hover,
.employee:hover {
    opacity: 0.8;
}

.item.active,
.employee.active {
    background-color: #27aceb;
    color: #fff;
    border-color: #27aceb;
    z-index: 10;
}

.item.disabled {
    opacity: 0.5;
    cursor: default;
}

.team {
    min-height: 240px;
    padding-top: 15px;
    padding-bottom: 15px;
    border: 1px solid #fff;
    background-color: #dff3fc;
}

.team-b {
    background-color: #fbe0e7;
}

.employee {
    background-color: #bfe7f9;
    color: #1494d0;
    margin: 1px;
    padding: 5px;
    cursor: move;
}

.team-b .employee {
    background-color: #f3b9c9;
    color: #dd4672;
}

.team-b .employee.active {
    background-color: #dd4672;
    color: #fff;
}

.empty {
    height: 150px;
}