如何使一个特定的元素在特定的断点后缩短大小(Tailwind css)

bpsygsoo 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(176)

所以，我是react/web dev的新手。
刚刚学会了媒体查询的基本原理，但我不能让我的头脑通过这个特定的问题，在我想改变的导航栏中的搜索容器的大小到另一个更小的元素（放大镜），当用户从桌面切换到移动的版本.
我用过<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>

个字符
x1c 0d1x的数据

的

css

来源：https://stackoverflow.com/questions/77753969/how-to-make-a-certain-element-shortened-in-size-after-certain-breakpoints-tailw

1条答案

按热度按时间

9fkzdhlc1#

当你想隐藏/显示元素时，考虑分别应用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>

型

赞(0）回复(0）举报 2024-01-09

我来回答

如何使一个特定的元素在特定的断点后缩短大小(Tailwind css)

代码

1条答案

相关问题

热门标签

最新问答