Bootstrap 的响应式 DIV 放置
Responsive DIVs placement with Bootstrap
我需要在它们的父容器中放置一些 DIV，无论是 body、table 的 cell 还是另一个 div，带Bootstrap 5，如附图所示：
在偶数个 DIV 的情况下，它们应该占可用宽度的 50%，由 2 放置在一行中。或者，如果有奇数个 DIVs，最后一个应该占用可用宽度的 100%，而所有前面的仍然占用可用宽度的 50%，并按 2 放置在一行中。
最好可以更改 DIV 的顺序（如移动视图示例）。
使用 UIKit 使用一些简单的代码，如
<div class="uk-grid">
<div class="uk-width-large-1-2">DIV 1 takes 50% of available width</div>
<div class="uk-width-large-1-2">DIV 2 takes 50% of available width</div>
<div class="uk-width-large-1-2">DIV 3 takes 100% of available width</div>
</div>
但是无论我用 Bootstrap 的文档（以及 Stack Overflow）搜索过什么，我仍然找不到解决方案。
Bootstrap 是 mobile-first，这意味着我们在较小的断点处定义的任何内容都将级联到较大的断点，直到被覆盖。
除了隐式（默认）移动断点外，还有 5 个显式 breakpoints：
| Breakpoint | Dimensions
|------------|-----------
| NONE | <576px
| sm | ≥576px
| md | ≥768px
| lg | ≥992px
| xl | ≥1200px
| xxl | ≥1400px
调整 divs
的大小
将 columns 与响应断点语法一起使用：
<div class="row g-2">
<div class="col-12 col-md-6">...</div>
...
</div>
col-12 指定移动端及以上的全宽（12 个中的第 12 个）col-md-6 在 md 及以上指定半宽（12 个中的 6 个）（即从 md 开始，此规则覆盖 col-12 规则）g-2 指定 gutters to auto-pad the columns (or use manual spacing 实用程序)
请注意，与任何 css class 一样，书面顺序（col-12 col-md-6 与 col-md-6 col-12）无关紧要。 Bootstrap 按 mobile-first 顺序应用样式。
自动展开最后一个 div
But what if I don't know how many divs are going to be inside the row and therefore do not know if their number would be an odd or an even? Don't know which exact div is going to be the last one but still need the last div inside the container to be 100% width?
如果您使用模板语言，我建议将此逻辑放在模板中。这有点超出了这个问题的范围，但是例如对于 django，一个最小的模板可能看起来像：
<div class="row">
{% for col in cols %}
<div class="col-12{% if loop.last and not forloop.counter|divisibleby:2 %} col-md-6{% endif %}">
...
</div>
{% endfor %}
</div>
或者要用纯 css 处理它，您可以添加一个 width 规则，目标是最后一个 col 如果奇数：
.row > .col-md-6:last-child:nth-child(odd) {
width: 100%;
}
重新排序 divs
使用响应式 flex order utilities:
<div class="row">
<div class="order-2 order-md-1">...</div>
<div class="order-1 order-md-2">...</div>
...
</div>
order-2 order-md-1指定位置2在手机及以上，位置1在md及以上order-1 order-md-2指定位置1在手机及以上，位置2在md及以上
注意父容器必须是flex container。 bootstrap row 默认是 flex，但对于非 flex 容器，显式添加 d-flex class。
最小示例
.row > .col-md-6:last-child:nth-child(odd) {
width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<body class="bg-secondary">
<div class="container pt-3">
<div class="row g-2">
<div class="col-12 col-md-6 order-2 order-md-1">
<div class="bg-light text-center p-2">DIV 1</div>
</div>
<div class="col-12 col-md-6 order-1 order-md-2">
<div class="bg-light text-center p-2">DIV 2</div>
</div>
<div class="col-12 col-md-6 order-3">
<div class="bg-light text-center p-2">DIV 3</div>
</div>
<div class="col-12 col-md-6 order-4">
<div class="bg-light text-center p-2">DIV 4</div>
</div>
<div class="col-12 col-md-6 order-5">
<div class="bg-light text-center p-2">DIV 5</div>
</div>
</div>
</div>
</body>
我需要在它们的父容器中放置一些 DIV，无论是 body、table 的 cell 还是另一个 div，带Bootstrap 5，如附图所示：
在偶数个 DIV 的情况下，它们应该占可用宽度的 50%，由 2 放置在一行中。或者，如果有奇数个 DIVs，最后一个应该占用可用宽度的 100%，而所有前面的仍然占用可用宽度的 50%，并按 2 放置在一行中。
最好可以更改 DIV 的顺序（如移动视图示例）。
使用 UIKit 使用一些简单的代码，如
<div class="uk-grid">
<div class="uk-width-large-1-2">DIV 1 takes 50% of available width</div>
<div class="uk-width-large-1-2">DIV 2 takes 50% of available width</div>
<div class="uk-width-large-1-2">DIV 3 takes 100% of available width</div>
</div>
但是无论我用 Bootstrap 的文档（以及 Stack Overflow）搜索过什么，我仍然找不到解决方案。
Bootstrap 是 mobile-first，这意味着我们在较小的断点处定义的任何内容都将级联到较大的断点，直到被覆盖。
除了隐式（默认）移动断点外，还有 5 个显式 breakpoints：
| Breakpoint | Dimensions
|------------|-----------
| NONE | <576px
| sm | ≥576px
| md | ≥768px
| lg | ≥992px
| xl | ≥1200px
| xxl | ≥1400px
调整 divs
的大小
将 columns 与响应断点语法一起使用：
<div class="row g-2">
<div class="col-12 col-md-6">...</div>
...
</div>
col-12指定移动端及以上的全宽（12 个中的第 12 个）col-md-6在md及以上指定半宽（12 个中的 6 个）（即从md开始，此规则覆盖col-12规则）g-2指定 gutters to auto-pad the columns (or use manual spacing 实用程序)
请注意，与任何 css class 一样，书面顺序（col-12 col-md-6 与 col-md-6 col-12）无关紧要。 Bootstrap 按 mobile-first 顺序应用样式。
自动展开最后一个 div
But what if I don't know how many
divs are going to be inside the row and therefore do not know if their number would be an odd or an even? Don't know which exactdivis going to be the last one but still need the lastdivinside the container to be 100% width?
如果您使用模板语言，我建议将此逻辑放在模板中。这有点超出了这个问题的范围，但是例如对于 django，一个最小的模板可能看起来像：
<div class="row">
{% for col in cols %}
<div class="col-12{% if loop.last and not forloop.counter|divisibleby:2 %} col-md-6{% endif %}">
...
</div>
{% endfor %}
</div>
或者要用纯 css 处理它，您可以添加一个 width 规则，目标是最后一个 col 如果奇数：
.row > .col-md-6:last-child:nth-child(odd) {
width: 100%;
}
重新排序 divs
使用响应式 flex order utilities:
<div class="row">
<div class="order-2 order-md-1">...</div>
<div class="order-1 order-md-2">...</div>
...
</div>
order-2 order-md-1指定位置2在手机及以上，位置1在md及以上order-1 order-md-2指定位置1在手机及以上，位置2在md及以上
注意父容器必须是flex container。 bootstrap row 默认是 flex，但对于非 flex 容器，显式添加 d-flex class。
最小示例
.row > .col-md-6:last-child:nth-child(odd) {
width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<body class="bg-secondary">
<div class="container pt-3">
<div class="row g-2">
<div class="col-12 col-md-6 order-2 order-md-1">
<div class="bg-light text-center p-2">DIV 1</div>
</div>
<div class="col-12 col-md-6 order-1 order-md-2">
<div class="bg-light text-center p-2">DIV 2</div>
</div>
<div class="col-12 col-md-6 order-3">
<div class="bg-light text-center p-2">DIV 3</div>
</div>
<div class="col-12 col-md-6 order-4">
<div class="bg-light text-center p-2">DIV 4</div>
</div>
<div class="col-12 col-md-6 order-5">
<div class="bg-light text-center p-2">DIV 5</div>
</div>
</div>
</div>
</body>