时间戳

首页 > 解决方案 > Bootstrap 4：如何设置特定响应方块的网格 - Col 或 Card？

bootstrap-4 - Bootstrap 4：如何设置特定响应方块的网格 - Col 或 Card？

问题描述

对于我的索引页面，我需要设置这样一个网格： 在此处输入图像描述

对于Col-md第 8 项，应位于第 4 项和第 5 项之下。对于Col-sm积木，请转到：item 1、lower -item 4和5、lower -2和3、lower - 6 and 7、lower - item 8。

所有的块都应该是可点击的。

使用 cols 和 card 尝试了一些变体。没有得到任何结果来显示它。

有任何想法吗？

UPD：试过这个。

<style>
      div{background-color: rgba(255,0,0,0.1);}
      .square{height: 166 px; width: 166px;}
      .expo_announcements{height: 166px; width: 337px;}
      .big_square{height: 337px; width: 337px;}
</style>

<div class="container">
          <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-4 expo_announcements" style="background-color: red;">
              <p>Item 1</p>
            </div>
            <div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-2 square" style="background-color: #0058a1;">
              <p>Item 2</p>
            </div>
            <div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-2 square" style="background-color: #9cbd3c;">
              <p>Item 3</p>
            </div>
            <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-4 big_square" style="background-color: #f1ecbd;">
              <p>Item 8</p>
          </div>
        </div>

标签： bootstrap-4flexboxgrid

解决方案

推荐阅读