您好，所以我已經為此作業了幾個小時，并嘗試使用暴力強制它，我能想到的不同解決方案，但我似乎并沒有讓它發揮作用。
目標：當螢屏更大時，使卡片占用更多寬度
這是我的根組件：
function App() {
const event = new Date(Date.UTC(2000, 11, 20, 3, 0, 0));
return (
<div className="bg-gray-200 p-8 min-h-screen flex items-center justify-center antialiased text-gray-900 flex-col">
<Expenses date={event}></Expenses>
<Expenses date={event}></Expenses>
<Expenses date={event}></Expenses>
</div>
);
}
export default App;
這是費用部分
export default function Expenses(props) {
return (
<div className="">
<ExpenseItem time={props.date}></ExpenseItem>
</div>
);
}
這是費用專案組件
export default function ExpenseItem(props) {
return (
<div className="bg-white rounded-lg overflow-hidden border flex h-auto mt-4 shadow">
<CalendarItem date={props.time}></CalendarItem>
<div className="p-4">
<h4 className="font-semibold text-lg">All my money for software engineering</h4>
<div>10000€</div>
<div className="mt-4 inline-block bg-indigo-300 text-white px-4 py-1 rounded-lg shadow-lg uppercase tracking-wide font-semibold text-sm ">
<a href="">Delete</a>
</div>
</div>
</div>
);
}
我很感激每一個輸入！謝謝！
uj5u.com熱心網友回復：
向卡片及其父組件添加“寬度：100%”。當瀏覽器調整大小（擴大或縮小）時，它們也會調整大小。您可以通過為父級提供一些寬度來處理其尺寸的細節，并且父級的寬度將是卡片組件的限制寬度。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/408309.html
標籤：