【问题标题】: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;

【问题讨论】:

  • 尝试 right-0 和 left-0
  • 导航栏居中,两边留出空间

标签: html css tailwind-css


【解决方案1】:

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

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

https://tailwindcss.com/docs/container

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

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

【讨论】:

    【解决方案2】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-03-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-25
      • 1970-01-01
      相关资源
      最近更新 更多