這是我第一次使用順風
但我在構建回應式網站時遇到了一些問題
容器在小型設備上不起作用
它在中等設備上作業，如下所示：中型設備
而這個在小型設備上：小型設備
有代碼：
<div className="bg-blackColor min-h-screen">
<div className="container mx-auto py-10">
<div className="flex justify-between">
<div className="flex flex-[2_2_0%] items-center justify-between">
<div className="flex-1">
<img src={EnverLogo} alt="Logo" className="w-[130px] h-[40px]" />
</div>
<ul className="lg:flex justify-between flex-1 hidden">
<li className="text-lg font-bold hover:text-whiteColor text-primaryColor">Home</li>
<li className="text-lg text-opacity-70 hover:text-opacity-100 text-whiteColor">Services</li>
<li className="text-lg text-opacity-70 hover:text-opacity-100 text-whiteColor">Our Project</li>
<li className="text-lg text-opacity-70 hover:text-opacity-100 text-whiteColor">About Us</li>
</ul>
</div>
<div className="lg:flex flex-1 items-center justify-end hidden">
<div className="w-[160px] h-[35px] border-2 border-whiteColor rounded-md backdrop-blur-md" />
</div>
</div>
</div>
</div>
uj5u.com熱心網友回復：
我假設您想知道為什么小螢屏上沒有水平填充。這是因為在下面sm，寬度是 100%，所以它當然會跨越整個視口寬度。sm向上和向上，它看起來像有填充，因為視口可能比它大一點640px，并且您可能已經將它居中。
如果我的假設是正確的，您需要根據Tailwindcss 檔案自己手動為容器提供填充：
// tailwind.config.js
module.exports = {
theme: {
container: {
center: true,
padding: {
DEFAULT: '1rem',
sm: '2rem',
lg: '4rem',
xl: '5rem',
'2xl': '6rem',
},
},
},
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/482157.html
標籤：javascript html css 反应 顺风CSS
上一篇：是否可以像apolloclient那樣在反應查詢中模擬GaphQL請求中的模式欄位？
下一篇：如何在React中獲取父元素id