Bootstrap 4：制作响应式“pixelart”DIV
Posted
技术标签:
【中文标题】Bootstrap 4：制作响应式“pixelart”DIV【英文标题】：Bootstrap 4: make a responsive "pixelart" DIV 【发布时间】：2018-07-24 23:14:54 【问题描述】：我是 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（包含我所有的彩色方块）保持其在页面上的初始位置，而不是在屏幕太小时时消失。我认为它是部分响应，但我觉得我错过了一些东西。
您能否给我一个提示或解释我的错误在哪里？
【问题讨论】：
我不明白问题/问题是什么。 【参考方案1】：首先，如果您打算实现完全响应，则不能将盒子的高度固定。最终你需要一个正方形，你可以通过 here 解释的一点 css 技巧来实现。
那么您将不得不在.col-1 和swaggysauron 上工作，如jsfiddle here 所示。
.col-1padding:0;
.swaggysauron
width: 380px;
max-width: 100%;
swaggysauron 中指定的 min-width 和 .col-1 中的 padding 在这种情况下是个麻烦。
【讨论】：
感谢您的回答和解释，对我帮助很大，结果正是我所寻求的。我正在阅读您的最后一句话，“填充”之后是否缺少部分？ 不客气。是的，这是一个错字。你可以忽略它。我在上次编辑中删除了相同的内容。【参考方案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的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Bootstrap 在 Yii 框架上响应式地制作普通的 div 块？
响应式网页设计Bootstrap开发速成 从入门到精通学习总结入门教程