Question

（我使用HTML，CSS，带有Gridsystem的Bootstrap 3.3.7，我是JS / jQuery的新手）

嘿伙计们，

我正在构建一个包含多个元素的SPA（单页应用程序），每个元素100vh，因此它应该看起来像4个不同的＆＃34;幻灯片＆＃34;。

我的问题：

根据窗口大小，我不希望DIV，图片，标题和段落在堆叠元素下反复响应。

元素应该按比例移动，但是我调整浏览器窗口的大小。就像你拍的照片越来越大。如果我让窗口变小，那么一切都应该与一个非常比例缩放一起缩小。

我确信那里有知识，但请帮助我，我太傻了，我用了半小时的谷歌搜索并没有找到任何东西。

你知道我需要应用于我的元素的属性和样式来摆脱难看的元素过度堆叠吗？给比例缩放比例。

万分谢谢！

Answer 1

.wrapper {
    display: flex;
    flex-direction: row;
    height: 100%;

}
.item {
    display: flex;
    flex-direction: row;
    height: 90vh;
}

<div class='wrapper'>
<span class='item'>1</span>
<span class='item'>2</span>
<span class='item'>3</span>
<span class='item'>4</span>
</div>

您可以使用此代码段作为参考。如果我错了，请告诉我。

Answer 2

您不需要Flex来满足此要求。

只需使用col-xs-*
即可轻松限制堆叠中的块

＆＃13;

.block {
  height: 100vh;
  background: gray;
  border: 5px solid blue;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3 block"></div>
    <div class="col-xs-3 block"></div>
    <div class="col-xs-3 block"></div>
    <div class="col-xs-3 block"></div>
  </div>
</div>

＆＃13;

调整窗口大小时，使每个元素按比例放置

2 个答案: