- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经在我的 React 元素中实现了 antd,但我一生无法弄清楚一件事。我有一行 3 列,当屏幕尺寸缩小时,我想将 3 列折叠为一列。
每当我调整屏幕大小时,它们只会一次折叠一个而不是一次全部折叠。我能够使用 flex 在 vanilla html/css 中实现这一点,但由于某种原因,我无法使用 antd 获得相同的效果。我试过添加媒体查询,但没有运气。
这是它开始崩溃时的样子,我还附上了我的代码笔以供引用。会不会是我在列上的 flex 设置设置不正确?
react 示例: Codepen
CSS
@import 'antd/dist/antd.css';
.Red {background: red; color: white; width: 200px;}
.Green {background: green; color: white; width: 200px;}
.Blue {background: blue; color: white; width: 200px;}
@media screen and (max-width: 992px) {
.column {
flex: 10%;
}
}
JS
const { Row, Col, Divider } = antd;
ReactDOM.render(
<>
<Row className="row">
<Col flex="1 0 auto" className="column Red">Red</Col>
<Col flex="1 0 auto" className="column Green">Green</Col>
<Col flex="1 0 auto" className="column Blue">Blue</Col>
</Row>
</>,
mountNode,
);
Vanilla 示例: (预期输出):
Codepen
<div class="row">
<div class="column red">Red</div>
<div class="column green">Green</div>
<div class="column blue">Blue</div>
</div>
CSS
.red {background: red; color: white; width: 300px; float: left}
.green {background: green; color: white; width: 300px; float: left}
.blue {background: blue; color: white; width: 300px; float: left}
/* Container for flexboxes */
.row {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 25%;
padding: 20px;
}
@media screen and (max-width: 800px) {
.column {
flex: 50%;
}
}
最佳答案
您设置为 auto 的 flex-basis 使包装行为在将其拆分为三列之前拆分为两列。因为它是设置的最小初始值,如行宽和列高。
您可以将 flex-basis 设置为 25%,这样它就不会根据默认包装行为拆分。
做出的改变——
HTML
const { Row, Col, Divider } = antd;
ReactDOM.render(
<>
<Row className="row">
<Col flex="1 0 25%" className="column Red">Red</Col> <!-- From auto to 25%, same as below -->
<Col flex="1 0 25%" className="column Green">Green</Col>
<Col flex="1 0 25%" className="column Blue">Blue</Col>
</Row>
</>,
mountNode,
);
CSS
@media screen and (max-width: 992px) {
.column {
flex: 100% !important; /* !important so that it overrides the inline style because by default it has higher priority */
}
}
Codepen 演示:
https://codepen.io/m4n0/pen/OJNrLqz
关于css - 用于列的 Antd 响应式 Flex,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64002977/
阅读有关 Ant Design 的信息,我对使用哪个库进行移动 Web 开发感到困惑。有两个库,antd和 antd-mobile .虽然很明显 antd-mobile 在 iOS 和 Android
我已经将 antd 更新到 5.0.0。我现在有这些导入错误。 @import '~antd/es/style/themes/default.less'; @import '~antd/dist/an
我已经将 antd 更新到 5.0.0。我现在有这些导入错误。 @import '~antd/es/style/themes/default.less'; @import '~antd/dist/an
我们如何隐藏表格中的列以在前端显示,该列已存在于使用 Ant 设计表的数组中? 例如,我的数组对象中有一个名为 ID 的列,但不需要在表 View 中显示,它应该保存在 JSON 列表本身中以供引用。
版本3.0.3 环境个人电脑, Chrome 转载链接 https://codesandbox.io/s/my02ok19wy 重现步骤现在,Table 可以通过两种方式扩展行: 在第一列使用图标 单
版本3.0.3 环境个人电脑, Chrome 转载链接 https://codesandbox.io/s/my02ok19wy 重现步骤现在,Table 可以通过两种方式扩展行: 在第一列使用图标 单
如何从 ant d 模态中隐藏顶部的 X 按钮,以及如何禁用使用 ESC 键关闭模态的行为 return ( {modalBodyText} ); 最佳答案 基于documentation版本
这个 GatsbyJS/antd 插件页面 ( https://github.com/bskimball/gatsby-plugin-antd/issues/2 ) 使得在使用 GatsbyJS 时似
有人可以举例说明如何使用 get Font Awesome 与 AntD 框架一起工作吗?他们提到您可以将 SVG 与外部图标一起使用。 谢谢, 塔类 最佳答案 不直接,但您可以自己制作 IconFo
我在 React 应用程序中使用 AntD。我想在表格单元格中添加一个图标,但我遇到了问题。我的特定列的代码如下: : } /> 我得到的第一个错误是 意外使用“状态”其中在我的数据源中,状态是
在 Bootstrap 4 中,您可以使用以下实用程序: Bootstrap includes a wide range of shorthand responsive margin and padd
我正在为 Next.js 项目使用 antd npm 包。我正在努力更改 Form.Item 组件的标签文本颜色。 我在下面尝试,但它没有改变标签颜色。 最佳答案 使用 CS
我想在遇到某些断点时隐藏一些 div,在 bootstrap v4 中有类似的东西:hidden-sm-down 阅读网格文档后,设置 可能是解决方案 这是我的例子:http://codepen.io
如果我输入无效的邮件 ID,我需要使用 antd 工具提示显示“无效的电子邮件!!”。如何在ReactJS antd Form中使用它?我现在使用的代码是:
我正在使用 antd-mask-input我的 Ant Design 应用程序上的库将掩码放入我的 antd form 的字段中.这个 antd-mask-input 库是使用这个 inputmask
没有那个文件或目录,当使用 Vite 和 Antd Pro Layout 时 这是文件vite.config.ts: import { defineConfig } from 'vite'; impo
我正在通过 ant-design (antd) 库开发一个 reactjs 元素。我想在我的元素中使用 Carousel 组件。当我将内容的背景色 - 应显示在轮播内 - 设置为#FFF 时,元素符号
我有问题 ./src/index.js 找不到模块:无法解析 '~ antd/dist/antd.css',我无法修复它。我试着把@import '~ antd/dist/antd.css'; .在
当我尝试在 ant design 中使用 react 进行这样的导入时 import {UserOutlined, LockOutlined} from '@ant-design/icons' 我收
我有一个 antd 面板作为折叠/ Accordion 元素的一部分,我正在尝试设置样式并呈现文本的附加部分作为标题的一部分。我通读了他们的文档,他们允许您使用 extra 属性添加额外的元素,但我似
我是一名优秀的程序员,十分优秀!