我是bootstrap 4的初学者，我仔细阅读了文档，但是我很难使我的项目完全响应。
我的HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SwaggySauron</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="swaggysauron">
<div class="row">
<div class="col-1 pix pink"></div>
<div class="col-1 offset-9 pix pink"></div>
</div>
<div class="row">
<div class="col-1 pix pink"></div>
<div class="col-1 pix offset-3 purple"></div>
<div class="col-1 pix cyan"></div>
<div class="col-1 pix purple"></div>
<div class="col-1 pix offset-3 pink"></div>
</div>
<div class="row">
<div class="col-1 pix pink"></div>
<div class="col-1 pix offset-2 purple"></div>
<div class="col-1 pix cyan"></div>
<div class="col-1 pix black"></div>
<div class="col-1 pix cyan"></div>
<div class="col-1 pix purple"></div>
<div class="col-1 pix offset-2 pink"></div>
</div>
<div class="row">
<div class="col-1 pix pink"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix purple"></div>
<div class="col-1 pix purple"></div>
<div class="col-1 pix cyan"></div>
<div class="col-1 pix black"></div>
<div class="col-1 pix cyan"></div>
<div class="col-1 pix purple"></div>
<div class="col-1 pix purple"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix pink"></div>
</div>
<div class="row">
<div class="col-1 pix pink"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix offset-1 purple"></div>
<div class="col-1 pix cyan"></div>
<div class="col-1 pix black"></div>
<div class="col-1 pix cyan"></div>
<div class="col-1 pix purple"></div>
<div class="col-1 pix offset-1 pink"></div>
<div class="col-1 pink"></div>
</div>
<div class="row">
<div class="col-1 pix pink"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix offset-1 purple"></div>
<div class="col-1 pix cyan"></div>
<div class="col-1 pix purple"></div>
<div class="col-1 pix offset-1 pink"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix pink"></div>
</div>
<div class="row">
<div class="col-1 pix offset-1 pink"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix offset-3 pink"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix pink"></div>
</div>
<div class="row">
<div class="col-1 pix offset-2 pink"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix pink"></div>
</div>
<div class="row">
<div class="col-1 pix offset-3 pink"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix pink"></div>
</div>
<div class="row">
<div class="col-1 pix offset-4 pink"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix pink"></div>
</div>
<div class="row">
<div class="col-1 pix offset-4 pink"></div>
<div class="col-1 pix pink"></div>
<div class="col-1 pix pink"></div>
</div>
</div>
</div>
</body>
我的css：
.pink {
border: 3px solid pink;
background-color: pink;
}
.purple {
border: 3px solid purple;
background-color: purple;
}
.cyan {
border: 3px solid #00ffff;
background-color: #00ffff;
}
.black {
border: 3px solid black;
background-color: black;
}
.pix {
height: 50px;
border: 1px solid white;
}
.swaggysauron {
min-width: 380px;
}
所以我的问题是我希望我的
.swaggysaurondiv，它包含了我所有的彩色方块，保持它在页面上的初始位置，而不是在屏幕太小时消失。我认为这是部分反应，但我有一种感觉，我错过了什么。你能给我一个提示或者解释一下我的错误在哪里吗？
最佳答案
第一件事，如果你打算去一个完整的反应，你不能保持一个盒子的高度固定。最后，你需要一个正方形，你可以通过一个解释here的css技巧来实现。
然后，您必须处理.col-1和swaggysauron，如jsfiddle here所示。
.col-1{padding:0;}
.swaggysauron {
width: 380px;
max-width: 100%;
}
在这种情况下，
min-width中指定的swaggysauron和padding中指定的.col-1是一个问题。关于html5 - Bootstrap 4:制作响应式的“pixelart” DIV，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48786213/