删除响应式网站中不必要的间距

Question

我只是在学习如何编码，但我不知道如何删除表单字段和按钮顶部和底部不必要的间距（如红星所示）。那里没有边距或填充。

我的网站在桌面上看起来很棒，但当我将其更改为移动设备时，出现了不必要的间距。在此先感谢您的帮助。

CSS代码：

/* Margins */
.my-1 {
margin: 1rem 0;
}

.my-2 {
 margin: 1.5rem 0;
}

.my-3 {
 margin: 2rem 0;
}

.my-4 {
 margin: 3rem 0;
}

.my-5 {
 margin: 4rem 0;
 }

Answer 1

您需要使用@mediaquery（最小宽度：您的特定断纸尺寸）{

}

以及您想要的元素的低填充顶部或填充底部。

Answer 2

space 的代码是 div <div class="waitlist-form my-5"> 中的 my-5。在这里，您将 y 轴上的边距设置为 5

一种简单的故障排除方法是使用浏览器工具检查 html 并查看盒子模型。正如您在屏幕截图中看到的那样，它告诉您顶部和底部边距设置为 64px。

bootstrap 有适用于各种屏幕尺寸的助手类，因此您可以根据屏幕尺寸更改边距。

<div class="waitlist-form my-5 my-sm-1">

看看在 Bootstrap https://getbootstrap.com/docs/5.0/layout/breakpoints/

中使用断点

删除响应式网站中不必要的间距

Remove unnecessary spacing in responsive website

html

css

mobile-website

responsive-design