html - 使用 flexbox 响应保持相同的图标大小

标签 html css reactjs tailwind-css

<分区>

我的调谐器有问题,我尝试保持相同大小的箭头,但是当我降低分辨率时,箭头变小了

<div className="shadow rounded my-5">
            <div onClick={() => toggle(index)} key={index} className="bg-[#8e9fbc] rounded text-white font-bold flex justify-between items-center cursor-pointer p-5">
        <span>{item.question}</span>
        {clicked === index ? (<ChevronDownIcon className="w-6 "/>) :<ChevronRightIcon className="w-6  "/>}
        
        </div>
       {clicked === index ? (<div className="p-5"> {item.reponse}</div>) : null} </div>

enter image description here

你能帮帮我吗?谢谢!

最佳答案

简单地应用 flex-shrink: 0; 到图标,这可以防止它们变小。

请注意,您应该为这些图标设置宽度。

关于html - 使用 flexbox 响应保持相同的图标大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70557911/

相关文章:

java - Html 或 EPUB 格式的 Android 电子书

javascript - jQuery 逐个淡出多个 div,然后同时淡入所有

reactjs - 在 React 中使用类而不是 className 属性的任何或多或少的官方方式

ReactJS - 如何将组件引用作为 Prop 传递给另一个组件?

html - css中的滚动条拇指高度

html - 如何使 Twitter bootstrap 上的导航栏无响应

css - 无法使溢出-x 在全宽 flexbox 列中工作

html - 为什么这个 HTML 不起作用?

css - 简单地更改 HTML5 背景

javascript - 如何调用 script.jsx 使react.js工作