當我更改為全局導入我的 vue 布局時出現的這個 CSS 問題如何解決？

Question

我最近更改為全局導入項目的布局頁面，而不是在使用布局的每個頁面上都這樣做。 我知道此更改使布局組件成為使用它的頁面的父級（在每個頁面中導入布局組件使其成為頁面的子級），但我現在知道這也會影響 CSS 級聯和特異性規則.

我做了一些擺弄並設法讓事情恢復原樣，但我仍然無法修復導航部分的 CSS。

這些是我現在的截圖：

我將頁面的呈現 HTML 復制到 Tailwind Play，它會按我的預期生成頁面，這意味着我所擁有的應該可以工作。 這是屏幕截圖：

這是此頁面呈現的 HTML 代碼：

<div class="min-h-screen dark:text-white bg-gray-100 dark:bg-gray-700 border-b border-gray-200"><nav><!-- Primary Navigation Menu --><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex justify-between"><!-- Logo --><div class="pt-2"><a href="http://127.0.0.1:8000/dashboard"><img src="/img/Android-icon.png" alt="SmartWealth Logo" class="block h-9 w-auto"></a></div><!-- Navigation Links --><div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex"><a class="inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-800 text-sm font-medium leading-5 text-gray-700 dark:text-white focus:outline-none focus:border-indigo-700 dark:focus:border-indigo-200 transition" href="http://127.0.0.1:8000/dashboard"> Dashboard </a><a class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent dark:border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-white dark:hover:text-gray-300 hover:text-gray-800 dark:hover:border-gray-400 hover:border-gray-300 focus:outline-none focus:text-gray-700 dark:focus:text-gray-200 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/users"> Users </a></div><!-- Dropdown Navigation Menu --><div class="hidden sm:flex sm:items-center sm:ml-6"><!-- Settings Dropdown --><div class="ml-3"><div class="relative"><div><button class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition"><img class="h-8 w-8 rounded-full object-cover" src="https://smartwealth.s3.us-west-004.backblazeb2.com/profile-photos/x6ykUSsxOgm220vMTZbvaIIGe5Nu3wEsg9c0g469.jpg" alt="Adefowowe Adebamowo"></button></div><!-- Full Screen Dropdown Overlay --><div class="fixed inset-0 z-40" style="display: none;"></div><div class="absolute z-50 mt-2 rounded-md shadow-lg w-48 origin-top-left left-0" style="display: none;"><div class="rounded-md ring-1 ring-black ring-opacity-5 py-1 bg-white"><!-- Account Management --><div class="px-4 py-2 text-xs text-gray-400"> Manage Account </div><!--v-if--><div><a class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition" href="http://127.0.0.1:8000/manage/rbac"> Manage Roles and Permissons </a></div><div><a class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition" href="http://127.0.0.1:8000/user/profile"> Account Profile </a></div><div><a class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition" href="http://127.0.0.1:8000/investment-profile/create"> Risk Assessment </a></div><!--v-if--><!--v-if--><!--v-if--><div><a class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition" href="http://127.0.0.1:8000/providers/authorisation"> Provider Authorisation </a></div><div><a class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition" href="http://127.0.0.1:8000/chat/messages"> Chats </a></div><!--v-if--><div><a class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition" href="http://127.0.0.1:8000/user/api-tokens"> API Tokens </a></div><!-- Authentication --><form><div><button type="submit" class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 text-left dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition"> Log Out </button></div></form></div></div></div></div><!--Notifications Dropdown  --><div class="mx-2"><div class="relative"><div><div><span class=""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z" clip-rule="evenodd"></path></svg></span></div></div><!-- Full Screen Dropdown Overlay --><div class="fixed inset-0 z-40" style="display: none;"></div><div class="absolute z-50 mt-2 rounded-md shadow-lg w-48 origin-top-left left-0" style="display: none;"><div class="rounded-md ring-1 ring-black ring-opacity-5 py-1 bg-white"><!-- Notifications Management --><div class="block px-4 py-2 text-xs text-gray-400"> Your Notifications </div><div class="block px-4 py-2 text-xs text-gray-400"><button class="mx-2">x</button><button>Mark all as read</button></div><div class="bg-white"></div></div></div></div></div><!-- Page Theme Toggle --><div class="ml-2 flex items-right"><button><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd"></path></svg></button></div></div></div><!-- Hamburger --><div class="-mr-2 flex items-center sm:hidden"><button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition"><svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24"><path class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path><path class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button></div><!-- Responsive Navigation Menu --><div class="hidden sm:hidden"><div class="pt-2 pb-3 space-y-1"><div><a class="block pl-3 pr-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-800 text-base font-medium dark:font-bold text-indigo-700 dark:text-indigo-800 bg-indigo-50 dark:bg-gray-800 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-800 focus:bg-indigo-800 dark:focus:bg-gray-800 focus:border-indigo-700 dark:focus:border-indigo-200 transition" href="http://127.0.0.1:8000/dashboard"> Dashboard </a></div><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/users"> Users </a></div></div><!-- Responsive Settings Options --><div class="pt-4 pb-1 border-t border-gray-200"><div class="flex items-center px-4"><div class="flex-shrink-0 mr-3"><img class="h-10 w-10 rounded-full object-cover" src="https://smartwealth.s3.us-west-004.backblazeb2.com/profile-photos/x6ykUSsxOgm220vMTZbvaIIGe5Nu3wEsg9c0g469.jpg" alt="Adefowowe Adebamowo"></div><div class="ml-2"><div class="relative"><div><div><span class=""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z" clip-rule="evenodd"></path></svg></span></div></div><!-- Full Screen Dropdown Overlay --><div class="fixed inset-0 z-40" style="display: none;"></div><div class="absolute z-50 mt-2 rounded-md shadow-lg w-48 origin-top-left left-0" style="display: none;"><div class="rounded-md ring-1 ring-black ring-opacity-5 py-1 bg-white"><!-- Notifications Management --><div class="block px-4 py-2 bg-white text-xs text-gray-400"> Your Notifications </div><div class="block px-4 py-2 bg-white text-xs text-gray-400"><button class="mx-2">x</button><button>Mark all as read</button></div><div class="bg-white dark:bg-gray-800"></div></div></div></div></div><div class="ml-2"><button><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd"></path></svg></button></div></div><div class="mt-3 space-y-1"><!--v-if--><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/manage/rbac"> Manage Roles and Permissons </a></div><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/user/profile"> Account Profile </a></div><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/investment-profile/create"> Risk Assessment </a></div><!--v-if--><!--v-if--><!--v-if--><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/providers/authorisation"> Provider Authorisation </a></div><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/chat/messages"> Chats </a></div><!--v-if--><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/user/api-tokens"> API Tokens </a></div><!-- Authentication --><form method="POST"><div><button class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition w-full text-left"> Log Out </button></div></form></div></div></div></div></nav><!-- Display messages from backend sent as flash page props --><div><!--v-if--></div><!-- Display notifications broadcasts (wrap into a reusable component) --><!--v-if--><!-- Page Heading --><!--v-if--><!-- Page Content --><main><!----><div slot="header" class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8"><h2 class="font-semibold text-xl text-gray-800 dark:text-gray-100 leading-tight"> Dashboard </h2></div><div class="py-8"><div class="max-w-3xl mx-auto sm:px-6 lg:px-8"><div class="rounded"><div class="p-6 sm:px-20 border border-gray-200 rounded"><div class="text-2xl"> Hello Adefowowe, welcome to SmartWealth! </div><div class="mt-1 text-sm"><p> Now that you're here, the first step is to take a risk assessment test to gauge your investment capacity and risk disposition. You can do that here: <a class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent dark:border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-white dark:hover:text-gray-300 hover:text-gray-800 dark:hover:border-gray-400 hover:border-gray-300 focus:outline-none focus:text-gray-700 dark:focus:text-gray-200 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/investment-profile/create"><strong> Risk Assessment </strong></a></p></div></div></div></div></div></main></div>

我該怎么做才能讓事情正常進行？

Answer 1

您必須在 CSS 文件中使用 append @media 屏幕尺寸作為：

 /* Small */ @media (min-width: 768px) {.container { width: 750px; } } /* Medium */ @media (min-width: 992px) {.container { width: 970px; } } /* Large */ @media (min-width: 1200px) {.container { width: 1170px; } }

 <div class="head"> <div class="container"> <p>some text</p> </div> </div>