Svelte Kit中Flowbite-Svelte导航栏大屏不显示列表项求助

可能原因及解决方案 #

1. 缺失Flowbite核心样式 #

flowbite-svelte组件依赖Flowbite的基础CSS，未引入会导致响应式布局失效，大屏下导航项无法显示。

在项目根目录的+layout.svelte中添加样式引入：

<script>
  import 'flowbite/dist/flowbite.min.css';
</script>

<slot />

2. 调整导航栏组件结构 #

原代码中直接传递hidden属性给NavUl可能导致大屏下错误隐藏导航项，改用组件库提供的NavMenu组件更符合官方设计逻辑：

<script>
  import { Navbar, NavBrand, NavLi, NavMenu, NavHamburger } from 'flowbite-svelte'
</script>

<Navbar let:hidden let:toggle>
  <NavBrand href="/">
    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
      Flowbite
    </span>
  </NavBrand>
  <NavHamburger on:click={toggle} />
  <NavMenu {hidden}>
    <NavLi href="/" active={true}>Home</NavLi>
    <NavLi href="/about">About</NavLi>
    <NavLi href="/services">Services</NavLi>
    <NavLi href="/pricing">Pricing</NavLi>
    <NavLi href="/contact">Contact</NavLi>
  </NavMenu>
</Navbar>

3. 升级组件库版本 #

旧版本flowbite-svelte可能存在响应式布局bug，执行命令升级到最新版：

npm update flowbite-svelte

内容的提问来源于stack exchange，提问作者amrtaweel