0

我在使用 Bootstrap v5.0 使用 HTML、CSS 进行网页设计时遇到问题。特别是，我有 3 个 div A、B、C，我希望它们响应式地重新排序，如下图所示。A 是一个 h2 + p，B 是 2 个按钮，C 是一个图像。 在此处输入图像描述

我的第一种方法是将 A 和 B 分组到 col-lg-6 中，将 C 分组到另一个 col-lg-6 中，但是这种方式是不合适的，因为代码必须遵循 ACB 的顺序才能获得如图所示的移动视图。

我已经在 StackOverflow 上搜索并尝试了有关此问题的多个帖子，但解决方案位于 Twitter Bootstrap 3 或 Bootstrap 4（使用推/拉类）中。一些答案说，在 Bootstrap 5.0 中，我们使用 -order 来解决此类问题。但是我尝试过但失败了，阅读文档后我真的不明白 -order 是如何工作的。

那么有人可以帮我解决这个问题吗？非常感谢！

4

2 回答 2

1

最简单的方法是在特定断点上“禁用”弹性框，这将允许浮动工作。这可以使用所有 Bootstrap 5 类来完成，因此没有额外的 CSS ...

<div class="container">
    <div class="row g-3 d-flex d-md-block">
        <div class="col-md-6 float-start">
            <div class="card card-body">A</div>
        </div>
        <div class="col-md-6 float-end">
            <div class="card card-body tall">C</div>
        </div>
        <div class="col-md-6 float-start">
            <div class="card card-body">B</div>
        </div>
    </div>
</div>

Bootstrap 5 演示中的浮动

或者，您可以在 Bootstrap 5 中使用新的 CSS-grid 类。但这需要您$enable-cssgrid使用 SASS：

<div class="container">
    <div class="grid">
        <div class="g-col-md-6 g-col-12">
            <div class="card card-body">A</div>
        </div>
        <div class="g-col-md-6 g-col-12" style="grid-row: span 2;">
            <div class="card card-body tall">C</div>
        </div>
        <div class="g-col-md-6 g-col-12">
            <div class="card card-body">B</div>
        </div>
    </div>
</div>

CSS 网格演示

相关：移动版本上具有不同顺序的引导程序

于 2021-08-12T12:24:56.793 回答
0

这可以在没有带有网格的 Bootstrap 的情况下实现。我为你创建了一个样本。

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

#grid {
  display: grid;
  grid-template-rows: 3fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 'A C' 'B C';
  grid-gap: 1rem;
}
@media (max-width: 576px) {
  #grid {
    grid-template-rows: auto auto auto;
    grid-template-columns: auto;
    grid-template-areas: 'A' 'C' 'B';
  }
}
#a {
  grid-area: A;
  border: 1px solid black;
  text-align: center;
}
#b {
  grid-area: B;
  border: 1px solid black;
  text-align: center;
}
#c {
  grid-area: C;
  border: 1px solid black;
  text-align: center;
}
<div id="grid">
  <div id="a">A</div>
  <div id="c">C</div>
  <div id="b">B</div>
</div>
或者，您可以在显示实用程序中使用 Bootstrap 的断点，如下所示：

#grid {
      grid-template-rows: 3fr 1fr;
      grid-template-columns: 1fr 1fr;
      grid-template-areas: 'A C' 'B C';
      grid-gap: 1rem;
    }
    @media (max-width: 576px) {
      #grid {
        grid-template-rows: auto auto auto;
        grid-template-columns: auto;
        grid-template-areas: 'A' 'C' 'B';
      }
    }
    #a {
      grid-area: A;
      border: 1px solid black;
      text-align: center;
    }
    #b {
      grid-area: B;
      border: 1px solid black;
      text-align: center;
    }
    #c {
      grid-area: C;
      border: 1px solid black;
      text-align: center;
    }
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex d-sm-grid flex-column" id="grid">
  <div id="a">A</div>
  <div id="c">C</div>
  <div id="b">B</div>
</div>

于 2021-08-12T12:23:14.480 回答