Antd List组件增加gutter属性后出现横向滚动,如何解决

第一次使用ant design的List列表组件,设置gutter间隔属性后,页面出现了横向滚动条,查阅文档发现是由于加间隔后导致容器宽度被撑开,ant design官方默认给外层容器加了margin-left和margin-right

 解决方法是在外层容器预留一定的padding,代码如下:

 <div className="list"><Listgrid={{gutter: 14,column: 3,}}dataSource={dataSource?.list}renderItem={(item) => (<List.Item><MoleculeCardkey={item.id}showModal={() => {}}checkedCard={this.checkedCard}checkedCardId={checkedCardId}cardDetail={item}/></List.Item>)}/></div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/1221.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用宏定义完成整数的二进制位的奇偶位互换

代码如下&#xff1a; #include <stdio.h> #define SWAP(num) (((num & 0xAAAAAAAA) >> 1) | ((num & 0x55555555) << 1))int main() {int num 1010;printf("%d\n", num);printf("%d\n", SWAP(num));return 0; }思路如下&…

MySQL数据备份与还原、索引、视图

一.备份与还原 /***************************样例表***************************/ CREATE DATABASE booksDB; use booksDB; CREATE TABLE books ( bk_id INT NOT NULL PRIMARY KEY, bk_title VARCHAR(50) NOT NULL, copyright YEAR NOT NULL …

统计页面左右+上下自适应布局

1:如果需要调整分栏数量,那么只需要删除对应数据,修改百分比即可. <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style type"text/css" lang"less" >body{margin: 0px ;}.box…

微信小程序用户登录及头像昵称设置教程(前后端)

目录 1.背景分析 2.具体需求分析 3.前端设计 3.1 用户登录 3.2 头像昵称填写&#xff08;个人信息界面&#xff09; 4.后端设计 4.1项目架构分析 4.2 代码分析 实体类 dao层 service层 controller层 工具类 5.nginx部署 6.效果演示 1.背景分析 众所周知&#x…

论文解读|VoxelNet:基于点云的3D物体检测的端到端学习

原创 | 文 BFT机器人 01 摘要 论文提出了表述了一个新的基于点云的3D检测方法&#xff0c;名为VoxelNet&#xff0c;该方法是一个端到端可训练的深度学习架构&#xff0c;利用了稀疏点云的结构特性&#xff0c;直接在稀疏的3D点上进行操作&#xff0c;并通过高效的并行处理体素…

01 - 如何制定性能调优标准?

1、为什么要做性能调优&#xff1f; 一款线上产品如果没有经过性能测试&#xff0c;那它就好比是一颗定时炸弹&#xff0c;你不知道它什么时候会出现问题&#xff0c;你也不清楚它能承受的极限在哪儿。 有些性能问题是时间累积慢慢产生的&#xff0c;到了一定时间自然就爆炸了…

Linux —— 进程状态

目录 一&#xff0c;进程状态分类 二&#xff0c;僵尸进程 三&#xff0c;孤儿进程 一&#xff0c;进程状态分类 进程状态反应进程执行过程中的变化&#xff0c;状态会随外界条件的变化而转换&#xff1b; 三态模型&#xff0c;运行态、就绪态、阻塞态&#xff1b;五态模型…

SpringCloud微服务(三)RabbitMQ、SpringAMQP、elasticsearch、DSL、MQ、ES详细介绍

目录 一、初始MQ 同步调用 异步调用 什么是MQ 执行下面的命令来运行MQ容器&#xff1a; 如果冲突了&#xff0c;可以先查询 RabbitMQ概述 常见消息模型 HelloWorld案例 二、SpringAMQP 引入依赖 Work Queue 消费预取限制 ​编辑 发布、订阅 发布订阅Fanout Ex…

进阶C语言——字符串和内存函数

今天我们学点库函数 字符函数和字符串函数 求字符串长度函数->strlen strlen需要的头文件是string.h ,那它的作用是什么呢&#xff1f;&#xff1f; 他是来求字符串长度的&#xff0c;统计的是’\0’前的字符串长度 #include<stdio.h> #include<string.h> int …

紫光展锐CEO任奇伟博士:用芯赋能,共建XR新生态

7月6日&#xff0c;2023世界人工智能大会在上海世博中心及世博展览馆盛大开幕。紫光集团高级副总裁、紫光展锐CEO任奇伟博士受邀出席芯片主题论坛&#xff0c;并发表题为《用芯赋能&#xff0c;共建XR新生态》的演讲。 世界人工智能大会自2018年创办以来已成功举办五届&#xf…

1.4 MVP矩阵

MVP矩阵代表什么 MVP矩阵分别是模型&#xff08;Model&#xff09;、观察&#xff08;View&#xff09;、投影&#xff08;Projection&#xff09;三个矩阵。 我们的顶点坐标起始于局部空间&#xff08;Local Space&#xff09;&#xff0c;在这里他成为局部坐标&#xff08;L…

面试题更新之-DOCTYPE html相关问题

文章目录 <!DOCTYPE html>是什么&#xff1f;为什么要在html文件开头加上一个<!DOCTYPE html>DOCTYPE的作用&#xff0c;严格与混杂模式的区别&#xff0c;有何意义HTML5为什么只需要写<!DOCTYPE HTML> 是什么&#xff1f; 是HTML文档的文档类型声明&#xf…

Redis进阶

Redis之父安特雷兹 redis x.x.x第二位是偶数的是稳定版本 redis7安装单机物理机安装&#xff1a; https://blog.csdn.net/G189D/article/details/129185947 数据类型 bitmap 统计二值状态的数据类型 最大位数2^32位&#xff0c;他可以极大的节约存储空间&#xff0c;使用…

postman 自动化测试

postman 自动化测试 0、写在前面1、变量引用1.1、如何在请求体中引用变量 0、写在前面 在有些时候看官方文档 比网上搜索效率要高&#xff0c; 比如网上搜一通还是不知道用法或者没有搜索到你想要的用法的时候。 postman官方文档 : https://learning.postman.com/docs/introdu…

layui选项卡演示

layui选项卡演示 .1 引入layui2. 选项卡演示实列3.js分离的代码4运行结果 在前端开发中&#xff0c;选项卡常用于展示多个内容模块&#xff0c;提供用户友好的界面交互方式。layui作为一款简洁易用的前端框架&#xff0c;提供了丰富的组件库&#xff0c;其中包括了强大且易用的…

《MySQL》事务

文章目录 概念事务的操作属性&#xff08;aicd&#xff09; 概念 一组DML语句&#xff0c;这组语句要一次性执行完毕&#xff0c;是一个整体 为什么要有事务&#xff1f; 为应用层提供便捷服务 事务的操作 有一stu表 # 查看事务提交方式(默认是开启的) show variables like au…

pytorch深度学习逻辑回归 logistic regression

# logistic regression 二分类 # 导入pytorch 和 torchvision import numpy as np import torch import torchvision from torch.autograd import Variable import torch.nn as nn import torch.nn.functional as F import torch.optim as optim import matplotlib.pyplot as …

Kafka第二课-代码实战、参数配置详解、设计原理详解

一、代码实战 一、普通java程序实战 引入依赖 <dependencies><dependency><groupId>org.apache.kafka</groupId><artifactId>kafka-clients</artifactId><version>2.4.1</version></dependency><dependency>&l…

Ceph的安装部署

文章目录 一、存储基础1.1 单机存储设备1.2 单机存储的问题1.3分布式存储&#xff08;软件定义的存储 SDS&#xff09; 二、Ceph 简介2.1 Ceph 优势2.2 Ceph 架构2.3 Ceph 核心组件2.4 Pool、PG 和 OSD 的关系&#xff1a;2.5 OSD 存储后端2.6 Ceph 数据的存储过程2.7 Ceph 版本…

面向初学者的卷积神经网络

卷积神经网络在机器学习中非常重要。如果你想做计算机视觉或图像识别任务&#xff0c;你根本离不开它们。但是很难理解它们是如何工作的。 在这篇文章中&#xff0c;我们将讨论卷积神经网络背后的机制、它的优点和应用领域。 什么是神经网络&#xff1f; 首先&#xff0c;让…