我正在使我的專案具有回應性，為此我想對齊通常彼此相鄰的按鈕，當螢屏變小時，它們從頂部對齊到機器人。
這是目前的按鈕： https ://i.stack.imgur.com/B7a46.png
這是他們的代碼：
<form class="mb-5 flex justify-left grid grid-cols-4 gap-x-20">
.
.
.
</form>
我正在使用tailwind css并嘗試添加類似的css代碼sm:grid sm:grid-rows-4- 然后為每個按鈕添加類似這樣的內容：sm:row-start-1
但是在正常的螢屏尺寸上，按鈕及其下方的內容之間也會產生巨大的空間。
任何輸入表示贊賞！
uj5u.com熱心網友回復：
我知道如何在基本 CSS 中做到這一點
添加這個類（如果需要，更改名稱）到你的表單
.form {
display: flex;
flex-direction: column; <!-- To make them aligned vertically -->
justify-content: space-evenly; <!-- To make them spaced evenly -->
}
將此類（如果需要，更改名稱）添加到您的按鈕
.button {
padding: 10px 20px; <!-- Change the padding to your liking -->
}
當螢屏尺寸假設為 600 像素時，使它們垂直對齊
@media (max-width:600px) <!-- To make them aligned vertically till the width of the screen is 600px -->
{
.form {
display: flex;
flex-direction: column; <!-- To make them aligned vertically -->
justify-content: space-evenly; <!-- To make them spaced evenly -->
}
.button {
padding: 10px 20px; <!-- Change the padding to your liking -->
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/419102.html
標籤：
下一篇：從物件轉換為陣列