我有以下HTML代码:
APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:75gU0FolfCoU506MangA+IclLhlQlapITFfjEA68mjU=
APP_DEBUG=true
APP_URL=http://localhost:8000
但是,当调整浏览器窗口大小时,该部分中的元素看起来放错了位置。我该如何预防?还是在更改浏览器窗口大小时如何使所有元素相应地调整大小?
答案 0 :(得分:1)
肯定有一些我不喜欢的其他HTML和CSS。我在CodePen中重新创建了该页面,并添加了一些其他CSS,使两者彼此相似。
#sectionOne{
background: black;
}
#caption-button{
border-radius:25px;
}
body{
background:white
}
.card-item{
background:white
}
即使这样,我也无法获得标题或按钮来将自己重新发布到容器之外。您希望调整哪些元素的大小以及所需的结果?
答案 1 :(得分:0)
尝试使用sm。替换网格类中的lg,例如ex-lg-4文本中心-> col-sm-4文本中心。有关更多信息,请在网格选项下引用引导网站(https://getbootstrap.com/docs/4.3/layout/grid/),然后根据正在其上运行网页的窗口/设备的大小来找到类名称。
答案 2 :(得分:0)
好吧,我刚刚弄清楚了,我将发布答案以供将来参考。在第一个div
组件上,我有style="height: 80vh;"
,这使整个节变得不太灵活,并且对浏览器窗口大小的更改的响应也有所降低。
我删除了style="height: 80vh;
,现在div的高度会相应地重新调整,以适应更改窗口大小时该组件中的所有元素。