缩小屏幕尺寸时更改填充或边距

Question

我有一行，这行内有2列。一列是col-lg-8，带有图像，另一列是带有文本的col-lg-4。我在右栏上填充文字，允许我垂直居中。 （我尝试了很多不同的方法，但这是最好的方法。）

缩小屏幕时，文字会显示在图像下方。填充保持不变。我知道在使用@media查询时有一种解决方法，但并非所有屏幕都是特定大小。

现在我已经在我的css中将查询设置为这样：

@media screen and (max-width: 991px)
{
    .content{
        padding: 20px;
    }
}

有没有办法在文本在照片下方折叠时自动将填充从300px更改为20px？

Answer 1

当你缩小屏幕但是你添加了col-md- ，col-sm - 和col-xs- *时，这可能是你问题的解决方案之一。

要将任何元素垂直居中，请使用css属性 align-items：center; 和 display：flex;