文章/答案/技术大牛

发布

社区首页 >问答首页 >引导4:制作响应性的“像素”DIV

问引导4:制作响应性的“像素”DIV
EN

Stack Overflow用户

提问于 2018-02-14 11:33:35

回答 2查看 411关注 0票数 3

我在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，其中包含了我所有的彩色方块，保持其最初的位置在页面上，而不是消失时，屏幕太小。我认为这是部分反应，但我觉得我遗漏了一些东西。

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

responsive-design

bootstrap-4

html

twitter-bootstrap

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-02-14 12:13:23

第一件事，如果你打算去一个完整的响应，你不能保持一个盒子的高度固定。最终，您需要一个方块，您可以通过一个小的css技巧，解释这里。

然后，您必须使用.col-1和swaggysauron，如这个小提琴手所示。

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

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

票数 1

Stack Overflow用户

发布于 2018-02-14 12:13:26

如果您的意思是您也希望高度响应，您可以为它添加此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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48786213

复制

相似问题

问引导4:制作响应性的“像素”DIV
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4:制作响应性的“像素”DIVEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4:制作响应性的“像素”DIV
EN