TailwindCSS 固定宽度属性不适用于分辨率更改

Question

我有这个 div 应该代表输入旁边的按钮。理想情况下，在分辨率发生变化时，输入元素的宽度会缩小，但按钮的高度和宽度保持不变。

<div className="flex flex-row rounded-lg border border-white border-solid hover:cursor-pointer py-2 px-2 w-28">
   <AddIcon></AddIcon>
   <div className="flex font-sans text-base font-medium">Add site</div>
</div>

我设置了w-28属性以为可以实现这个。但是，如果我缩小 window 或它出现的屏幕，按钮会改变宽度，我不确定为什么。

这是完整的组件：

<div id="settings" className="w-3/4 h-5/6 bg-blue-300 self-center">
      <div id="settings-content" className="flex flex-col self-center mx-5">
        <div id="header" className="flex flex-col mt-5">
          <div id="title" className="font-sans font-bold text-3xl">Block Sites</div>
        </div>
        <div id="subtitle" className="font-sans text-base font-medium text-neutral-600">Visiting these sites will stop point acquisition until you reset the timer</div>
        <div id="block-site-add-list" className="flex flex-row mt-16 justify-between bg-amber-400 shrink-0">
          <div className="flex flex-row rounded-lg border border-white border-solid hover:cursor-pointer py-2 px-2 w-28">
            <AddIcon></AddIcon>
            <div className="flex font-sans text-base font-medium">Add site</div>
          </div>
          <input className="ml-5 flex-grow bg-red-500"></input>
        </div>
      </div>
    </div>

这是按钮在较小屏幕上的样子，此时两个词应在同一行：

Answer 1

您可以尝试将 whitespace-nowrap 添加到您的标签 div 以确保文本不会换行。由于您将元素（按钮和输入）包裹在另一个 flex 中，因此您可以将 shrink-0 添加到包装器 div 以保持其大小。

例如：

<div id="block-site-add-list" className="flex flex-row ...">
  <div className="shrink-0 flex flex-row ...">
    <AddIcon></AddIcon>
    <div className="whitespace-nowrap font-sans text-base font-medium">Add site</div>
  </div>
  <input className="ml-5 grow bg-red-500"></input>
</div>

TailwindCSS 固定宽度属性不适用于分辨率更改

TailwindCSS fixed width property not working on resolution change

css

reactjs

tailwind-css

TailwindCSS 固定宽度 属性 不适用于分辨率更改

TailwindCSS fixed width property not working on resolution change

css

reactjs

tailwind-css

TailwindCSS 固定宽度属性不适用于分辨率更改