Question

我是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;
}

所以我的问题在于我希望我的.swaggysauron DIV（包含我所有的彩色方块）在页面上保留其初始位置，而不是在屏幕太小时消失。我觉得它有部分反应，但我觉得我错过了什么。

请你给我一个提示或解释一下我的错误在哪里？

Answer 1

首先，如果您打算寻求完整的响应，则不得保持盒子的高度固定。最终你需要一个方形，你可以通过一个小的css技巧解释here。

然后，您必须使用此jsfiddle here中显示的.col-1和swaggysauron。

.col-1{padding:0;}
.swaggysauron {
    width: 380px;
    max-width: 100%;
}

min-width中指定的swaggysauron和padding中的.col-1在这种情况下是个麻烦。

Answer 2

如果你的意思是你也希望高度响应，你可以为它添加这个CSS：

html, body, .container, .swaggysauron {
  height: 100%;
}
.row {
  height: 8.33%;
}
.col-1, .pix {
  height: 100%;
}

它首先将容器定义为100％高（窗口的那个），然后它将整个高度的1/12高度（即8.33％）应用于行以将它们全部装入容器中（实际上它是1/11，所以你可以将其改为9.09％），然后它确保.col-1和.pix元素恰好填充行的高度。

这是一个代码：https://codepen.io/anon/pen/MQvRxN

Bootstrap 4：制作响应式“pixelart”DIV

2 个答案: