Sencha touch 2 Sencha touch couresel项目一个浮在另一个之上

我的旋转木马呈现出奇怪的效果，它不会水平加载项目，而是一个项目一个地加载。看起来是这样的：

是因为我在模板里面制作了旋转木马吗？ 在这里您可以看到我的代码：

config: {
    title: 'More Info',
    layout: 'fit',
    items: [
        {
            xtype: 'formpanel',
            id:"moreInfo",
            items: [
                {   
                    id: 'moreContent',
                    tpl: [
                        '<div style="border-bottom 1px solid black">',
                            '<h2 style="margin-bottom:5px;text-transform:capitalize;font-weight:bold">Project: {project}</h2>',
                        '</div>'
                    ].join(''),
                },
                { 
                    xtype: 'carousel',
                    defaults: { cls: 'card'},
                    direction: 'horizontal',
                    layout: 'fit',
                    directionLock: true,
                    items:[
                        {
                            html: "<img src='image1'>",
                        },
                        {
                            html: "<img src='image2'>",
                        },
                        {
                            html: "<img src='image3'>",
                        },
                        {
                            html: "<img src='image4'>",
                        },

                    ]
                },
                {
                    xtype: 'fieldset',
                    defaults: {
                        labelWidth: '35%'
                    },  
                    title: 'Receipts',
                    items: [
                        {
                            xtype: 'button',
                            id: 'takePicture',
                            padding: '10px',
                            text: 'Taka a picture'
                        },
                        {
                            xtype: 'textfield',
                            label: 'Price',
                            name: 'price'
                        },
                        {
                            xtype: 'textfield',
                            label: 'Vendor',
                            name: 'vendor'
                        },
                    ]
                },
                {
                    xtype: 'button',
                    id: 'receiptSave',
                    padding: '10px',
                    ui:'confirm',
                    text: 'Save'
                },
            ]
        },

    ],
},

config:{
标题：“更多信息”，
布局：“适合”，
项目：[
{
xtype:'formpanel'，
id:“moreInfo”，
项目：[
{   
id:“moreContent”，
第三方物流：[
'',
'项目：{Project}'，
''
].加入（“”），
},
{ 
xtype:'旋转木马'，
默认值：{cls:'card'}，
方向：'水平'，
布局：“适合”，
方向锁：对，
项目：[
{
html:“”，
},
{
html:“”，
},
{
html:“”，
},
{
html:“”，
},
]
},
{
xtype:“字段集”，
默认值：{
标签宽度：“35%”
},  
标题:"收据",，
项目：[
{
xtype:'按钮'，
id:‘拍照’，
填充：“10px”，
文字：“Taka a图片”
},
{
xtype:'textfield'，
标签：“价格”，
名称：“价格”
},
{
xtype:'textfield'，
标签：“供应商”，
名称：“供应商”
},
]
},
{
xtype:'按钮'，
id:“receiptSave”，
填充：“10px”，
ui:“确认”，
文本：“保存”
},
]
},
],
},

我无法重现该问题。我在SenchaFIDLE中尝试过，只在旋转木马中添加了高度配置：你的小提琴看起来就像我的应用程序被soposed到的一样。也许我的css已经损坏了，我会检查一下。也许你也可以发布你的CSS，我会看看。我不添加任何CSS，我只使用默认的。这就是它在我的手机和桌面上呈现的方式，尝试将旋转木马的布局从“适合”设置为“卡”，并设置其绝对高度（尝试一个比图片中的一个小的），就像在SenchaFIDLE中一样。