Question

我正在制作一个带有HTML和CSS的角度应用程序，并且有一个带有按钮组的表单（水平排列3个按钮）。但是，当我使窗口变小时，按钮堆叠在另一个顶部。

这是一个类=＆＃34; list-unstyled btn-group＆＃34;在一个类=＆＃34; form-group＆＃34;中。如何调整按钮的大小以使它们保持水平？

Answer 1

按钮堆叠，因为所需空间不仅仅是可用空间。因此，您需要确保在较小的窗口中，可用空间应大于等于所需的空间

您可以通过以下方法实现这一目标。

使用媒体查询。

@media screen and (min-width:420px) and (max-width:770px) {
    // Write your styles here - reduce padding, font-size, etc
}

例如你有一个类my-class的元素，字体大小为12px，屏幕大小为420到770，想要font-size为10px。那么css会看起来

.my-class {
    font-size : 12px;
}

@media screen and (min-width:420px) and (max-width:770px) {
   .my-class {
         font-size : 10px;
    }
}