Question

我使用ant.design Card组件在react / redux中显示聊天webapp的消息。现在，每张卡片都会在卡片周围留出太多空间。无论如何都要让卡片将文字包裹得更近？

React代码为：

                        <Card
                            bordered={false}
                            style={{
                                // other styles...
                                width: width,
                                height: 70 <== just decreasing this number doesn't work 
                            }}
                        >
                            <p>{message.contents}</p>
                        </Card>

只是降低高度不起作用并产生：

Answer 1

我没有使用Card，而是使用了p和borderRadius的常规padding代码：

                    <p
                        style={{

                            borderRadius: '25px',
                            padding: '4px 15px 4px'
                        }}
                    >

Answer 2

您可以使用内联样式属性bodyStyle将样式应用于卡片内容。

使用css保持组件清洁的更好方法。

  <Card className="custom-card" bordered={false}>
    <p>Hey Hunter</p>
  </Card>

的CSS：

.custom-card {
  width: 100px;
  height: 35px;
}

.custom-card > .ant-card-body {
  display: table; 
  width: 100%;
  height: 100%;
  padding: 5px;
}

.custom-card > .ant-card-body > p {
  text-align:center; 
  vertical-align: middle;
  display: table-cell; 
}

检查 DEMO 。

Answer 3

我将首先检查开发工具中的元素，但更有可能的是，您应该将卡的高度设置为“自动”，并在其中的文本上添加填充。将类放在p标签上：

<p class='message-contents'>{message.contents}</p>

并定位它：

.message-contents { padding: 20px; }

将在卡片的两边将卡片内的空间设置为20px。将此更改为所需。

我也建议您在卡片上使用一个类，并将所有样式都放在外部样式表中，但是两者都可以。

Answer 4

您可以将Row的装订线属性用作网格间距，建议将其设置为（16 + 8n）px。（n代表自然数。）

您可以将其设置为 {xs：8，sm：16，md：24，lg：32} 之类的对象。

您可以使用数组设置垂直间距， [水平，垂直] [16，{xs：8，sm：16，md：24，lg：32}]。

https://ant.design/components/grid/

你怎么能让ant.design的卡更小？

4 个答案: