如何在某些断点后缩短某个元素的大小（Tailwind css）

Question

所以，我是 React/Web 开发新手。

刚刚学习了媒体查询的基础知识，但是我无法理解这个特定的问题，当用户时，我想将导航栏中的搜索容器的大小更改为另一个较小的元素（放大镜）从桌面版切换到移动版。

我已经使用了

<div class ="search invisible lg:visible">

但我不知道如何用其他元素替换不可见的元素。

#代码

这是整个导航栏。

            <div class = "flex text-white justify-start items-center">
                <div class = "hamburger-menu-container">
                    <i class="fa-solid fa-bars"></i>
                </div>
                <div class = "github-icon-container">
                    <i class="fa-brands fa-github fa-2xl"></i>
                </div>
                <div class = "dashboard-label-container">
                    <p class = "dash-font">Dashboard</p>
                </div>
            </div>
            <div class = "flex items-center items-center justify-end">
                <div class = "search">
                    <i id = "magnifing-icon" class="fa-solid fa-magnifying-glass"></i>
                    <div class = "msg-search-nav">
                        <div class = "msg-search-desc text-sm text-white pr-40">Type / for search</div>
                    </div>
                    <img class = "palette-icon w-5 p-1" src={command_palette} alt="" />
                </div>
                <div class = "flex nav-link items-center">
                    <i id = "plus-icon" class="fa-solid fa-plus"></i>
                    <select name="" id="select">
                        <option></option>
                    </select>
                </div>
                <div class = "nav-link">
                    <i class="nav-link-icon fa-regular fa-circle-dot"></i>
                </div>
                <div class  = "nav-link">
                    <i class="nav-link-icon fa-solid fa-code-pull-request"></i>
                </div>
                <div class ="nav-link">
                    <i class="nav-link-icon fa-solid fa-envelope"></i>
                </div>
                <img class="face-nav" src="https://avatars.githubusercontent.com/u/76707560?s=80&amp;v=4"/>
            </div>

                <div class = "search">
                    <i id = "magnifing-icon" class="fa-solid fa-magnifying-glass"></i>
                    <div class = "msg-search-nav">
                        <div class = "msg-search-desc text-sm text-white pr-40">Type / for search</div>
                    </div>
                    <img class = "palette-icon w-5 p-1" src={command_palette} alt="" />
                </div>
                <div class = "flex nav-link items-center">
                    <i id = "plus-icon" class="fa-solid fa-plus"></i>
                    <select name="" id="select">
                        <option></option>
                    </select>
                </div>

Answer 1

当您想分别隐藏/显示元素时，请考虑应用

display: none

和

display: block

。这比

visibility: hidden

和

visibility: visible

更适合您的情况，因为

visibility: hidden

意味着该元素仍然占用布局空间。这意味着当它不可见时，可能会出现一些您必须处理的空白行为。

要替换为更紧凑的元素，您可以使用另一个具有相反

display

值的元素：

<div class="… hidden lg:block">
  …
</div>
<div class="block lg:hidden">
  …
</div>

<script src="https://cdn.tailwindcss.com/3.4.0"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="flex text-white justify-start items-center">
  <div class="hamburger-menu-container">
    <i class="fa-solid fa-bars"></i>
  </div>
  <div class="github-icon-container">
    <i class="fa-brands fa-github fa-2xl"></i>
  </div>
  <div class="dashboard-label-container">
    <p class="dash-font">Dashboard</p>
  </div>
</div>
<div class="flex items-center items-center justify-end">
  <div class="search hidden lg:block">
    <i id="magnifing-icon" class="fa-solid fa-magnifying-glass"></i>
    <div class="msg-search-nav">
      <div class="msg-search-desc text-sm text-white pr-40">
        Type / for search
      </div>
    </div>
    <img class="palette-icon w-5 p-1" src="command_palette" alt="" />
  </div>
  <div class="block lg:hidden border rounded p-2">
    <i class="fa-solid fa-magnifying-glass"></i>
  </div>
  <div class="flex nav-link items-center">
    <i id="plus-icon" class="fa-solid fa-plus"></i>
    <select name="" id="select">
      <option></option>
    </select>
  </div>
  <div class="nav-link">
    <i class="nav-link-icon fa-regular fa-circle-dot"></i>
  </div>
  <div class="nav-link">
    <i class="nav-link-icon fa-solid fa-code-pull-request"></i>
  </div>
  <div class="nav-link">
    <i class="nav-link-icon fa-solid fa-envelope"></i>
  </div>
  <img
    class="face-nav"
    src="https://avatars.githubusercontent.com/u/76707560?s=80&amp;v=4"
  />
</div>