响应式侧边栏顺风css
[英]Responsive sidebar tailwind css
问题描述
I've been struggling with making responsive sidebar for so long with tailwindcss.
长期以来，我一直在努力使用 tailwindcss 制作响应式侧边栏。 Currently it looks like this目前它看起来像这样
it looks fine when i have it on 1920x1080 screen, but not on bigger or smaller screens.当我在 1920x1080 屏幕上使用它时看起来不错，但在更大或更小的屏幕上却不行。 When I scale it smaller the text is too close to each other and it doesnt look good image当我将其缩小时，文本彼此太靠近并且看起来不太好
i want it to hide that sidebar when the resolution is small, and instead of that sidebar there will be a button that will open sidebar, also when i zoom in (with ctrl + PLUS) that sidebar (zoomed in)我希望它在分辨率较小时隐藏该侧边栏，而不是该侧边栏，将有一个打开侧边栏的按钮，当我放大（使用 ctrl + PLUS）该侧边栏（放大）时
my html current code我的 html 当前代码
<div class="scale-90">
<div class="flex flex-wrap w-full h-screen">
<div class="xs:w-3/12 xs:h-128 w-3/12 visible xm:invisible bg-gradient-to-tr rounded-3xl from-black via-gray-900 to-black p-3 shadow-lg ">
<div class="h-screen sticky top-0">
<div class="flex space-x-4 p-2 mt-4 mb-8 justify-center ">
<img class="h-20 align-middle" src="src/assets/fx-culture.png" alt="James Bhatta">
</div>
<div class="mr-32">
<div class="flex justify-center mr-16">
<img class="h-12 align-middle rounded-full" src="src/assets/logo1.png">
</div>
<ul class="space-y-10 text-sm">
<li>
<a class="flex items-center mr-16 space-x-3 justify-center text-gray-500 text-xl p-2 font-medium">
<span>Hello</span>
</a>
<a class="flex items-center ml-5 mb-20 space-x-3 justify-center text-white text-xl p-2 font-medium">
<span>Kristian Kotlar</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 text-2xl p-2 font-medium hover:text-white focus:shadow-outline">
<span>My profile</span>
</a>
</li>
<li>
<a href="#" class="flex items-center ml-10 space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
<span>Subscriptions</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 justify-center text-white transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
<span>Academy</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
<span>Calendar</span>
</a>
</li>
<li>
<a href="#" class="flex items-center mt-32 space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
<span>Settings</span>
</a>
</li>
<li>
<a href="" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
<span>Sign Out</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="xs:w-8/12 w-8/12 xs:ml-20 xm:12/12 bg-white rounded-3xl">
<div class="grid place-items-center min-h-screen">
<div class="p-4 justify-items-center xs:justify-items-start max-w-5xl grid gap-x-24 gap-y-8 xs:gap-y-12 xs:gap-x-128 xs:grid-cols-3 xs:p-1 ">
<h1 class="text-4xl font-extrathick xs:col-span-3 xs:grid xs:gap-4 xs:grid-cols-3">Webinars</h1>
<div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl">
<img src="src/assets/logo.png" class="mx-auto">
<h1 class="text-3xl font-extralight text-gray-500 text-center">
<span class="">Beginners</span>
</h1>
</div>
<div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl">
<img src="src/assets/logo.png" class="mx-auto">
<h1 class="text-3xl font-extralight text-gray-500 text-center">
<span class="">Advanced</span>
</h1>
</div>
<div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl">
<img src="src/assets/logo.png" class="mx-auto">
<h1 class="text-3xl font-extralight text-gray-500 text-center">
<span class="">Professional</span>
</h1>
</div>
<h1 class="text-4xl font-extrathick xs:col-span-3 xs:grid xs:gap-4 xs:grid-cols-3">Academy</h1>
<div class="h-96 w-256 overflow-auto inline-block ">
<table class="min-w-full">
<tbody>
<tr class="bg-gray-200">
<td class="p-3 px-6 py-4 text-gray-700">
asdasdasdasdasd
</td>
<td class="px-6 text-gray-700">
1:27:21
</td>
</tr>
<tr class="pt-8">
<td class="px-6 py-4 text-gray-700">
asdasdasdasdasdsssssssssssss
</td>
<td class="px-6 text-gray-700">
0:19:21
</td>
</tr>
<tr class="bg-gray-200">
<td class="p-3 px-6 py-4 text-gray-700">
asdasdasdasdasd
</td>
<td class="px-6 text-gray-700">
0:20:21
</td>
</tr>
<tr class="pt-8">
<td class="px-6 py-4 text-gray-700">
asdasdasdasdasdsssssssssssss
</td>
<td class="px-6 text-gray-700">
1:13:37
</td>
</tr>
<tr class="bg-gray-200">
<td class="p-3 px-6 py-4 text-gray-700">
asdasdasdasdasd
</td>
<td class="px-6 text-gray-700">
0:55:01
</td>
</tr>
<tr class="pt-8">
<td class="px-6 py-4 text-gray-700">
asdasdasdasdasdsssssssssssss
</td>
<td class="px-6 text-gray-700">
1:13:37
</td>
</tr>
<tr class="bg-gray-200">
<td class="p-3 px-6 py-4 text-gray-700">
asdasdasdasdasd
</td>
<td class="px-6 text-gray-700">
0:55:01
</td>
</tr>
</tbody>
</table>
</div>
<div class="h-96 w-256 xs:ml-36 bg-gray-100 rounded-xl">
</div>
</div>
</div>
</div>
</div>
</div>
and my tailwind.config.js file和我的 tailwind.config.js 文件
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {
width: {
'256': '30rem',
},
height: {
'128': '61rem',
},
},
screens: {
xs: "1390px",
md: "1040px",
xdd: "1000px",
...defaultTheme.screens,
}
},
plugins: [],
}
1 个解决方案
解决方案1
0 2021-12-30 14:52:13
To hide the side bar on small screens, you can simply hide the sidebar by default and on larger screens you'll show it.要在小屏幕上隐藏侧边栏，您可以在默认情况下简单地隐藏侧边栏，然后在大屏幕上显示它。 You can read more about it on Tailwind documentation您可以在 Tailwind 文档中了解更多信息
Also add a toggle icon that will show on smaller screens and be hidden on larger screens and finally you can add Javascript to display the hidden sidebar as an overlay on smaller screens.还添加一个切换图标，该图标将在较小的屏幕上显示并在较大的屏幕上隐藏，最后您可以添加 Javascript 以在较小的屏幕上显示隐藏的侧边栏作为覆盖。
I did a quick implementation of this on codepen (although without the Javascript toggle function), feel free to copy the code and add your javascript toggle function.我在 codepen 上做了一个快速的实现（虽然没有 Javascript 切换功能），随意复制代码并添加你的 javascript 切换 function。
Check it on Codepen在 Codepen 上查看
<script src="https://cdn.tailwindcss.com"></script> <div class="scale-90"> <button aria-expanded="true" aria-controls="sidebar" class="lg:hidden text-gray-600 hover:text-gray-900 cursor-pointer rounded"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path> </svg> <svg class="w-6 h-6 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button> <div class="flex flex-wrap w-full h-screen"> <div class="hidden lg:block xs:w-3/12 xs:h-128 w-3/12 visible xm:invisible bg-gradient-to-tr rounded-3xl from-black via-gray-900 to-black p-3 shadow-lg "> <div class="h-screen sticky top-0"> <div class="flex space-x-4 p-2 mt-4 mb-8 justify-center "> <img class="h-20 align-middle" src="src/assets/fx-culture.png" alt="James Bhatta"> </div> <div class="mr-32"> <div class="flex justify-center mr-16"> <img class="h-12 align-middle rounded-full" src="src/assets/logo1.png"> </div> <ul class="space-y-10 text-sm"> <li> <a class="flex items-center mr-16 space-x-3 justify-center text-gray-500 text-xl p-2 font-medium"> <span>Hello</span> </a> <a class="flex items-center ml-5 mb-20 space-x-3 justify-center text-white text-xl p-2 font-medium"> <span>Kristian Kotlar</span> </a> </li> <li> <a href="#" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 text-2xl p-2 font-medium hover:text-white focus:shadow-outline"> <span>My profile</span> </a> </li> <li> <a href="#" class="flex items-center ml-10 space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline"> <span>Subscriptions</span> </a> </li> <li> <a href="#" class="flex items-center space-x-3 justify-center text-white transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline"> <span>Academy</span> </a> </li> <li> <a href="#" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline"> <span>Calendar</span> </a> </li> <li> <a href="#" class="flex items-center mt-32 space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline"> <span>Settings</span> </a> </li> <li> <a href="" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline"> <span>Sign Out</span> </a> </li> </ul> </div> </div> </div> <div class="xs:w-8/12 w-8/12 xs:ml-20 xm:12/12 bg-white rounded-3xl"> <div class="grid place-items-center min-h-screen"> <div class="p-4 justify-items-center xs:justify-items-start max-w-5xl grid gap-x-24 gap-y-8 xs:gap-y-12 xs:gap-x-128 xs:grid-cols-3 xs:p-1 "> <h1 class="text-4xl font-extrathick xs:col-span-3 xs:grid xs:gap-4 xs:grid-cols-3">Webinars</h1> <div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl"> <img src="src/assets/logo.png" class="mx-auto"> <h1 class="text-3xl font-extralight text-gray-500 text-center"> <span class="">Beginners</span> </h1> </div> <div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl"> <img src="src/assets/logo.png" class="mx-auto"> <h1 class="text-3xl font-extralight text-gray-500 text-center"> <span class="">Advanced</span> </h1> </div> <div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl"> <img src="src/assets/logo.png" class="mx-auto"> <h1 class="text-3xl font-extralight text-gray-500 text-center"> <span class="">Professional</span> </h1> </div> <h1 class="text-4xl font-extrathick xs:col-span-3 xs:grid xs:gap-4 xs:grid-cols-3">Academy</h1> <div class="h-96 w-256 overflow-auto inline-block "> <table class="min-w-full"> <tbody> <tr class="bg-gray-200"> <td class="p-3 px-6 py-4 text-gray-700"> asdasdasdasdasd </td> <td class="px-6 text-gray-700"> 1:27:21 </td> </tr> <tr class="pt-8"> <td class="px-6 py-4 text-gray-700"> asdasdasdasdasdsssssssssssss </td> <td class="px-6 text-gray-700"> 0:19:21 </td> </tr> <tr class="bg-gray-200"> <td class="p-3 px-6 py-4 text-gray-700"> asdasdasdasdasd </td> <td class="px-6 text-gray-700"> 0:20:21 </td> </tr> <tr class="pt-8"> <td class="px-6 py-4 text-gray-700"> asdasdasdasdasdsssssssssssss </td> <td class="px-6 text-gray-700"> 1:13:37 </td> </tr> <tr class="bg-gray-200"> <td class="p-3 px-6 py-4 text-gray-700"> asdasdasdasdasd </td> <td class="px-6 text-gray-700"> 0:55:01 </td> </tr> <tr class="pt-8"> <td class="px-6 py-4 text-gray-700"> asdasdasdasdasdsssssssssssss </td> <td class="px-6 text-gray-700"> 1:13:37 </td> </tr> <tr class="bg-gray-200"> <td class="p-3 px-6 py-4 text-gray-700"> asdasdasdasdasd </td> <td class="px-6 text-gray-700"> 0:55:01 </td> </tr> </tbody> </table> </div> <div class="h-96 w-256 xs:ml-36 bg-gray-100 rounded-xl"> </div> </div> </div> </div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
响应式固定侧边栏CSS - Responsive Fixed Sidebar CSS
使用 Tailwind CSS 的侧边栏中的下拉菜单 - Dropdown menu inside sidebar using Tailwind CSS
CSS对于响应式侧边栏和主要内容？ - CSS For responsive sidebar and main content?
使用 CSS 的响应式侧边栏交互 - Responsive sidebar interaction using CSS
如何在 tailwind css 中创建响应式网格布局？ - How to create responsive grid layout in tailwind css?
nextjs 应用程序上的 Tailwind CSS 响应行为 - Tailwind CSS responsive behavior on nextjs app
如何在侧边栏前添加标题部分与顺风 css - How to add heading section before sidebar with tailwind css
固定宽度侧边栏在 Tailwind 中尺寸不合适 CSS - Fixed width sidebar isn't the right size in Tailwind CSS
在响应式CSS和HTML网站中向下推侧边栏 - Pushing sidebar down in responsive CSS and HTML website
如何在顺风 css 中制作两个网格响应式布局 - How to make two grid responsive layout in tailwind css
相关标签