side类的所有列在缩小屏幕尺寸时都会消失，即使我已指定应该在屏幕尺寸为xs时显示它们。我在Google Chrome浏览器中使用了inspect元素，当屏幕缩小时它们确实存在，但是它们没有宽度。这是HTML：
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class=top>
<h3>Website</h3>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-md-3 col-xs-8 side">
Hi
</div>
<div class="col-xs-1 space"></div>
<div class="col-xs-1 space"></div>
<div class="col-md-4 col-xs-8 center">
HI
</div>
<div class="col-xs-1 space"></div>
<div class="col-xs-1 space"></div>
<div class="col-md-3 col-xs-8 side">
Hi
</div>
<div class="col-1"></div>
</div>
</body>
</html>
而且我已经用Sass编写了CSS，所以这里是作为scss文件（将在下面添加css文件）：
$pagebg:lightgrey;
$primarycolor:orange;
$secondarycolor:white;
$divheight:500px;
%interests{
height:$divheight;
border-radius:20px;
}
.center {
@extend %interests;
background: $secondarycolor;
color:$primarycolor;
}
.side {
@extend %interests;
background: $primarycolor;
color:$secondarycolor;
}
.top{
background:$primarycolor;
color:$secondarycolor;
border-radius:0 0 5px 5px;
margin-bottom:45px;
width:100%;
}
@media (min-width:992px){
.space{
display:none;
}
}
@media (min-width:577px) and (max-width:991px){
.space{
height:$divheight;
}
}
@media(max-width:576px){
.side, .center{
border-radius:0;
}
}
这里是纯CSS：
.side, .center {
height: 500px;
border-radius: 20px;
}
.center {
background: white;
color: orange;
}
.side {
background: orange;
color: white;
}
.top {
background: orange;
color: white;
border-radius: 0 0 5px 5px;
margin-bottom: 45px;
width: 100%;
}
@media (min-width: 992px) {
.space {
display: none;
}
}
@media (min-width: 577px) and (max-width: 991px) {
.space {
height: 500px;
}
}
@media (max-width: 576px) {
.side, .center {
border-radius: 0;
}
}
谢谢！
首先，您必须在HTML中包含此Meta Tag，以使Google Chrome开发者工具能够正常工作，尤其是后继工具！
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在您的[[style.css文件中，代码显示您正在消失所有包含space类而不是side类的div。
@media (min-width: 992px) {
.space {
display: none;
}
}
但是您在问题中提到包含side类的div正在消失。因此，如果要使所有包含类名side的div消失，则必须在CSS中包含此代码。
@media (min-width: 992px) { .side { display: none; } }