Question

以下是我尝试做的一个例子：https://i.imgur.com/Jhj3Xn2.png

我真的不确定这是否可能，我怀疑它可能不存在，或者可能需要Javascript库才能实现这一目标。

我要做的是建立一个响应式画廊，它既有垂直元素，也有水平元素。我发现的是，虽然你可以让元素在一个特定的屏幕尺寸上看起来很好，但是一旦你改变了视口宽度，你最终会得到“洞”。在布局中。

任何人都可以想出一种方法来让内容在页面上流动，既可以响应，又不会在内容中留下空白？我正在使用Bootstrap 4，我很乐意使用任何可能需要JS或CSS来完成此任务。

Answer 1

这是与你的结构相似的结构，因为必须使用类而有点混乱，是的它的Bootstrap类（col-12＆lt; - 这类似于col-xs-12适用于＆lt; 576px）

您可以添加所需尺寸并相应地构建它。

如果您不了解某些事情，请告诉我。

＆＃13;

.outer {
  width: 500px;
  height: 500px;
  margin: auto;
  margin-top: 20px;
}

.top {
  height: 250px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container outer">
  <div class="row top">
    <div class="col-3" style="border:1px solid black;">
      <div class="row">
        <div class="col-12" style="border:1px solid black; height:125px;">
        </div>
        <div class="col-12" style="border:1px solid black; height:125px;">
        </div>
      </div>
    </div>


    <div class="col-6" style="border:1px solid black;">
      <div class="row">
        <div class="col-6" style="border:1px solid black; height:125px;">
        </div>
        <div class="col-6" style="border:1px solid black; height:125px;">
        </div>
      </div>

      <div class="row">
        <div class="col-12" style="border:1px solid black; height:125px;">
        </div>
      </div>
    </div>


    <div class="col-3" style="border:1px solid black;">
      <div class="row">
        <div class="col-12" style="border:1px solid black; height:250px;">
        </div>
      </div>
    </div>
  </div>
  <div class="row top">

    <div class="col-3" style="border:1px solid black;">
      <div class="row">
        <div class="col-12" style="border:1px solid black; height:250px;">
        </div>
      </div>
    </div>


    <div class="col-3" style="border:1px solid black;">
      <div class="row">
        <div class="col-12" style="border:1px solid black; height:125px;">
        </div>
        <div class="col-12" style="border:1px solid black; height:125px;">
        </div>
      </div>
    </div>


    <div class="col-3" style="border:1px solid black;">
      <div class="row">
        <div class="col-12" style="border:1px solid black; height:125px;">
        </div>
        <div class="col-12" style="border:1px solid black; height:125px;">
        </div>
      </div>
    </div>

    <div class="col-3" style="border:1px solid black;">
      <div class="row">
        <div class="col-12" style="border:1px solid black; height:125px;">
        </div>
        <div class="col-12" style="border:1px solid black; height:125px;">
        </div>
      </div>
    </div>



  </div>
</div>

＆＃13;

具有水平和垂直元素的响应网格

1 个答案: