Card组件样式乱了

[zoope]

Environment(required)

• antd version: 2.7.3
• OS and its version: windows 7
• Browser and its version: chorme

What did you do? Please provide steps to re-produce your problem.

我之前引用的2.7.3版本的Card组件，做了一个card的效果，结果..升级2.8.0后悲剧了...

What do you expected?

这是其中单个card的组件的引用

return <Card
    title={
      <h3 className='ant-card-head-title'>
        <span style={{color: '#108ee9',position:'absolute',left:'17px'}}>{`${priority === 'P0' ? 'P0' : ''} `}</span>{`名称：${eventName}`}
      </h3>
    }
    style={{marginBottom: '20px'}}
    extra={
      <Action 
        id = {id}
        handleChange = {handleChange}
        fetchDelete = {fetchDelete}
      />
    }
  >
    <FormItem label='事件码：' {...cardItemLayout}>
      <span>{eventCode}</span>
    </FormItem>
    <FormItem label='场景类型：' {...cardItemLayout}>
      <span>{bizSceneName}</span>
    </FormItem>
    <FormItem label='备注：' {...cardItemLayout}>
      <span>{remark}</span>
    </FormItem>
    <img src={BUUnicode[tenant]} alt={tenant} className='iconfont' {...cardBU}/>
  </Card>

What happen?

开发服务器的antD版本升级到2.8.0后样式就乱成这样了...

Re-producible online demo

这个就不方便给链接了...

[yesmeck]

You can create a reproduce demo on codepen http://codepen.io/benjycui/pen/KgPZrE?editors=001

[afc163]

我们在 2.8.0 里加了响应式支持，浏览器窗口宽度小于 768px 时布局会变化。

你出问题的截图里的浏览器窗口宽度是多少，我看不像有这么小。

[afc163]

还有你的 cardItemLayout 是啥，最好提供重现，把所有信息都给出来。代码给一半猜的多辛苦。

[afc163]

@zoope

[minwe]

问题出在 .ant-form-item-label 的 float 被设置成 none 了，所有 card 外面套一个容器（可以套个 Form，但用在你这种场景没有语义）：

<div className="ant-form-horizontal">
   <Card />
   <Card />
</div>

或者自己改一下样式。

你这里用 FormItem 其实也不太合理，仅仅是为了布局，可以自己用 Row 和 Col 封装一个类似的组件。

[minwe]

http://codepen.io/minwe/pen/RpoBLb?editors=001

[afc163]

fb8f90c#diff-51de536edf29809d26f0ccfab96f81fcL89

正如 @minwe 所说，这个改动导致了楼主的问题。

1. 直接使用 FormItem 确实是不规范的，我们的改动都是兼容于标准用法，即 Form + FormItem 的方式。
2. 不过这里看看能否兼容下楼主的调用方式吧。@benjycui

[benjycui]

这个感觉不大好兼容 😢

为了在不使用 JS 的前提下实现响应式 Form，把默认的表单样式改为了 vertical，然后 inline 和 horizontal 会在宽度小于一定时失效。

所以楼主碰到的问题是，因为之前默认样式为 horizontal，现在改为了 vertical 而导致的。

还是建议按标准用法来吧。

[zoope]

抱歉最近忙回复晚了....我尝试在最外面添加了Form标签就能恢复到原来的效果了。
@minwe 这里确实只是偷懒所以用了FormItem的label可以对齐的效果...
@afc163 cardItemLayout是自定义的一些样式，这里不怎么影响
感谢各位的解答~ 谢谢~

[guoxiangwen]

我是中套的card 如果某个card中的内容太多了。下一行会被撑的很远，怎么解决呢？

[TangDekun1990]

card组件的cover中的img src属性不能引用本地图片吗