如何让我的搜索栏在 tailwindcss 中响应？

问题描述 投票：0回答：1

我有一个带有徽标、搜索栏、注销按钮和个人资料图片的导航。

我想要左边的标志，右边的注销和个人资料图片，搜索栏应该在中间。

我已经做到了这一点，但我希望当屏幕从移动设备到 ipad 再到桌面时搜索栏变宽。

我尝试使用

grid-cols-3
移动设备和640px及以上
sm:grid-cols-4
然后在搜索栏上的标志
sm:col-span-1
上
sm:col-span-2
和注销和图片
sm:col-span:1.

输入有 

w-full
所以我预计它会变大，因为如果我理解正确的话，那个 div 现在有 2 列的宽度，但它保持相同的大小。

我的完整代码：

<body>
  <nav class="bg-gray-700">
    <div class="grid grid-cols-3 sm:grid-cols-4">
      <div class="pt-3 pb-2.5 ml-5 sm:col-span-1">
        <a href="#"><img src="images/logo.svg" alt="logo" class="w-50 h-7"></a>
      </div>

      <div class="flex mt-[2px] sm:col-span-2">
        <form class="flex h-9">
          <div class="">
            <input type="text" placeholder="Search.." class="text-base mt-2 p-1.5 rounded-l h-7 bg-white w-full">
          </div>
          <button type="submit" class="text-sm cursor-pointer rounded-r mt-2 px-2 bg-blue-600">
            <i class="fa fa-search relative top-[0.75px]"></i>
          </button>
        </form>
      </div>

      <div class="mt-1 flex flex-row-reverse sm:col-span-1">
        <div class="mt-2 mr-5 ml-2 relative bottom-[2px]">
          <a href="logout.php" class="text-sm underline text-white">Logout</a>
        </div>
        <img src="https://api.lorem.space/image/face?w=150&h=150" alt="profile picture" class="w-10 h-10 rounded-full mt-[1px]">
      </div>
    </div>
  </nav>
</body>
grid tailwind-css
1个回答
0
投票

正如Yilmaz评论的那样，解决方案是flex-1！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.