调整浏览器窗口大小时如何缩小所有HTML元素

Question

我有以下HTML代码：

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:75gU0FolfCoU506MangA+IclLhlQlapITFfjEA68mjU=
APP_DEBUG=true
APP_URL=http://localhost:8000

看起来像这样

但是，当调整浏览器窗口大小时，该部分中的元素看起来放错了位置。我该如何预防？还是在更改浏览器窗口大小时如何使所有元素相应地调整大小？

Answer 1

肯定有一些我不喜欢的其他HTML和CSS。我在CodePen中重新创建了该页面，并添加了一些其他CSS，使两者彼此相似。

#sectionOne{
  background: black;
}
#caption-button{
  border-radius:25px;
}
body{
  background:white
}
.card-item{
  background:white
}

即使这样，我也无法获得标题或按钮来将自己重新发布到容器之外。您希望调整哪些元素的大小以及所需的结果？

Answer 2

尝试使用sm。替换网格类中的lg，例如ex-lg-4文本中心-> col-sm-4文本中心。有关更多信息，请在网格选项下引用引导网站（https://getbootstrap.com/docs/4.3/layout/grid/），然后根据正在其上运行网页的窗口/设备的大小来找到类名称。

Answer 3

好吧，我刚刚弄清楚了，我将发布答案以供将来参考。在第一个div组件上，我有style="height: 80vh;"，这使整个节变得不太灵活，并且对浏览器窗口大小的更改的响应也有所降低。

我删除了style="height: 80vh;，现在div的高度会相应地重新调整，以适应更改窗口大小时该组件中的所有元素。