使用弹性框响应保持相同的图标大小

Question

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

<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>

你能帮帮我吗？谢谢！

Answer 1

只需将 flex-shrink: 0; 应用于图标，这样可以防止它们变小。

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

使用弹性框响应保持相同的图标大小

Keep same icon size with flex box responsive

html

css

reactjs

tailwind-css