html - Bootstrap 4 : make a responsive "pixelart" DIV-6ren

html - Bootstrap 4 : make a responsive "pixelart" DIV

转载作者：可可西里更新时间：2023-11-01 13:44:04

25

4

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

所以我的问题是，我希望包含所有彩色方 block 的 .swaggysauron DIV 保持其在页面上的初始位置，而不是在屏幕太小时消失。我认为它是部分响应式的，但我觉得我遗漏了一些东西。

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

最佳答案

首先，如果您打算获得完整的响应能力，则一定不要让盒子的高度保持固定。最终你需要一个正方形，你可以通过一个小的 css 技巧来实现 here .

然后您将必须处理 .col-1 和 swaggysauron，如 jsfiddle here 所示.

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

在 swaggysauron 中指定的 min-width 和 .col-1 中的 padding 是一个麻烦案件。

关于html - Bootstrap 4 : make a responsive "pixelart" DIV，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48786213/

25

4

0

文章推荐： python - 通过使用 for 循环修改 URL 来迭代网页

文章推荐： PHP:如何检测 jpeg 是否全黑(无图像)？

文章推荐： Php(eval vs call_user_func vs 变量函数...)

angular - 类型 'Observable>' 不可分配给类型 'Observable'
我有一个包含以下内容的简单服务: import { Injectable } from '@angular/core'; import { Http, Response } from '@angula
Angular - 类型 'OperatorFunction' 的参数不可分配给类型 'OperatorFunction' 的参数
在我的 Angular-12 应用程序中，我在服务中有以下代码: constructor(private http: HttpClient, private router: Router) {
php - 如何解析json的每个元素，如{"response":[ {"result" :"rohit1"}]} {"response":[ {"result" :"rohit"}]} {"response":[ {"result" :"rohit"}]}
我是android领域的新手，我想从响应json数组访问每个结果元素，但我无法做到这一点，我试图获取每个元素，但我只得到一个值“rohit1”是第一个元素。请帮助我。我是 rohit parmar，
java - 类型 Response.Response 构建器不可见
我正在用 java 编写 RESTful 服务，但是当我尝试使用 Resource 类时，显示以下错误:类型 Response.Response 构建器不可见。我不明白问题可能是什么，因为我已经导入了
java - Rest 模板 :Could not extract response: no suitable HttpMessageConverter found for response type when we got xml response, 未绑定(bind)到 JAVA 对象
在 Spring 应用程序中，我正在调用第三方服务，我正在发送 XML 请求并获取 XML 响应，当无法将该响应解析为 Java 对象时，我正确地获得了 XML 响应，我收到以下错误: org.spr
asp.net - Response.WriteFile & Response.Redirect
我正在发布一个页面 URL 例如 mysite.com/disclaimer/someinfo 此页面显示协议(protocol)，如果用户单击同意按钮，则 PDF 文件将作为附件流式传输。这样做的
java - Camel : how to check response http response
我是 Camel 的新手。我一直在尝试将数据(文件中的 Json)提交到网络服务。这是我的代码: public static void main(String args[]) throws E
java - 安全转换扩展到
我有一个 HTTP 执行器类: Future future = service.apply(request).toJavaFuture(); 现在我想删除 ? extends其中的一部分，因为我不想让
python ， flask : How to set response header for all responses
我想将我所有的 http header 响应设置为这样的: response.headers["X-Frame-Options"] = "SAMEORIGIN" 我检查了this question ，
response - 如何在 mirth 中从另一个 channel 获得 Response
我们有两个 channel ，分别是 channelA 和 channelB。在 channel A中我们有两个目的地一个。第一个目的地将使用 XML 数据作为输入调用 channelB，并从 c
javascript - response.status 和 response.writeHead 的区别？
以下有什么区别 response.status(200).send('Hello World!'); 和这个 response.writeHead(200, {'content-type':'appl
responsive-design - Zurb Foundation : layout not responsive on an iPhone
我试图让Foundation在iPhone的浏览器上响应。我已经在手机上尝试过Safari和Chrome，它们都显示了 table 面布局。但是，在 table 面上，如果缩小浏览器窗口，则会看到布
parse-platform - 在我的云代码中在哪里声明 response.success()/response.error()
您好，当我在云代码中运行此作业时，我收到一条错误日志:Failed with: success/error was not called. 定义功能运行良好，但在作业日志中我有此错误日志。请协助我解决
asp.net - 从客户端检测到潜在的危险Request.Form值(textboxError ="
我正在使用ozeki ng短信网关。我无法将任何短信发送到任何手机。请帮助我通过网络发送短信到手机从客户端检测到一个潜在危险的Request.Form值(textboxError =“。设置此值之后

wordpress - 发布或上传失败。错误消息: "The response is not a valid JSON response"
今天我在 WordPress 中遇到了问题。当我尝试创建一个新页面并在 WordPress 管理部分上传新图像时，我尝试找出解决方案，但我没有得到它......所以经过一个小时的打磨后我得到了一个解决
c# - 如果我之后直接使用 `Response.Flush()` `Response.End()`有意义吗？
我过去常常通过刷新和结束来结束对客户端的传输，如下面的代码所示。 Response.Flush(); Response.End(); 但是，Response.End() 将缓冲内容刷新到客户端让我印象
javascript - response.statusCode 和 response.status 的区别
我正在编写一个在单击按钮时显示对话框窗口的函数:这里是与状态和 statusCode 相关的代码段。 if(response.status>300){
c# - Response.Close() 和 Response.Dispose() 有什么区别？
从资源清理的角度，为什么会有Response.Close()和Response.Dispose()，哪个更全面(调用另一个)？最佳答案在提供这两种方法的情况下，Dispose 的实现应该调用 Cl
c# - Response.Headers.Add() 与 Response.AddHeader()
在我注意到我的代码可能在以经典模式设置的服务器上运行之前，我一直在使用 Response.Header.Add()。在这种情况下，异常“此操作需要 IIS 集成管道模式”。被提出。我切换到 Resp
c# - 我们可以使用 Response.Flush() 而不是 Response.End()
Response.End() 生成 ThreadAbortException。使用 HttpContext.Current.ApplicationInstance.CompleteRequest 代

首页

博学

6Ren·AI

商城

html - Bootstrap 4 : make a responsive "pixelart" DIV