导航栏固定位置收缩答案

【问题标题】：Navbar shrinking with fixed position导航栏固定位置收缩
【发布时间】：2021-06-10 15:16:15
【问题描述】：

我在我的苗条应用程序中使用了 tailwind-css。为什么我将位置设置为固定时，以下导航栏会缩小？

<nav class="container left-0 top-0 w-full bg-white">
        <div class="flex">
        <!-- navbar elements -->
        </div>
</nav>

有

    &lt;nav class="container fixed left-0 top-0 w-full bg-white"&gt;

【问题讨论】：

【解决方案1】：

问题可能是使用了container 类，而不是fixed 类。

在 TailwindCSS 中，container 用于将元素宽度限制为当前断点的宽度。

假设您的屏幕当前为 1200 像素宽。即使您设置了w-full，容器也将始终为 1024 像素宽。因为大断点的最大宽度是1024px。

当您将大小更新为max-w-full 时，您实际上是在消除对大小的限制，让nav 跨越屏幕的整个宽度。添加max-w-full 类会取消container 类。因此，如果同时删除 container 和 max-w-full 类，您实际上可以获得相同的结果。

【讨论】：

【解决方案2】：

我设法通过将 w-full 类修改为 max-w-full 来解决这个问题，尽管我不确定为什么它会产生如此大的不同

【讨论】：