时间戳

首页 > 解决方案 > 是否可以使用 bootstrap 4 网格以这种特定方式更改我的移动页面布局？

html - 是否可以使用 bootstrap 4 网格以这种特定方式更改我的移动页面布局？

问题描述

我目前有以下这样的引导网格设置

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="A">
        A
      </div>
    </div>
    <div class="col-8">
      <div class="B">
        B
      </div>
      <div class="C">
        C
      </div>
    </div>
  </div>  
</div>

这会产生类似于这种效果的东西

在此处输入图像描述

我现在一直在尝试编辑引导布局，以便在一个额外的小屏幕上网格折叠到这个

在此处输入图像描述

但我一直没有成功。我尝试过的解决方案主要是使用Order类，但我只能在两列之间切换顺序，而不能单独切换 3 个块。我也尝试将第二列拆分为单独的行，但Order似乎只在列中起作用。在引导网格中是否有可能发生这样的事情，还是我必须使用弹性类？

标签： htmlcssbootstrap-4flexbox

解决方案

见下文。您需要查看完整尺寸和非完整尺寸的页面。

.row > div {
  display: grid;
}

.A {
  order: 2;
}

.B {
  order: 1;
}

.C {
  order: 3;
}

@media (min-width: 1024px) {
  .A {
    order: 1;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  
  .B {
    order: 2;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  
  .C {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="A">
        A
      </div>
      <div class="B">
        B
      </div>
      <div class="C">
        C
      </div>
    </div>
  </div>
</div>

推荐阅读