使用 Bootstrap 进行响应式 DIV 放置

Question

我需要使用Bootstrap 5DIV将一些s 放入其父容器中，无论它是body、表cell还是其他容器div，如附图所示：

如果DIVs 数量为偶数，则它们应占据可用宽度的 50%，并在单行中加上 2。或者，如果DIVs 数量为奇数，则最后一个应占用可用宽度的 100%，而所有先前的仍占用可用宽度的 50%，并按 2 放置在一行中。

最好能够更改DIVs 顺序（如移动视图示例）。

使用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）搜索什么，我仍然找不到解决方案。

Answer 1

Bootstrap 是移动优先的，这意味着我们在较小的断点处定义的任何内容都将级联到较大的断点，直到被覆盖。

\n

除了隐式（默认）移动断点之外，还有 5 个显式断点：

\n

| Breakpoint | Dimensions\n|------------|----------- \n| NONE       | <576px\n| sm         | \xe2\x89\xa5576px\n| md         | \xe2\x89\xa5768px\n| lg         | \xe2\x89\xa5992px\n| xl         | \xe2\x89\xa51200px\n| xxl        | \xe2\x89\xa51400px\n

\n\n

调整divs 的大小

\n

使用具有响应式断点语法的列：

\n

<div class="row g-2">\n  <div class="col-12 col-md-6">...</div>\n  ...\n</div>\n

\n

\n
• col-12指定移动设备及以上设备的全宽度（12 of 12）
\n
• col-md-6指定半宽度（6 of 12） 及md以上（即，从 开始md，此规则覆盖col-12规则）
\n
• g-2指定装订线以自动填充列（或使用手动间距实用程序）
\n

\n

请注意，与任何 css 类一样，书写顺序 ( col-12 col-md-6vs ) 是无关紧要的。col-md-6 col-12Bootstrap 以移动优先的顺序应用样式。

\n\n

自动展开最后一个div

\n

\n

但是，如果我不知div道行内有多少个，因此不知道它们的数字是奇数还是偶数怎么办？不知道div最后一个是哪一个，但仍然需要div容器内的最后一个宽度为 100%？

\n

\n

如果您使用模板语言，我建议将此逻辑放入模板中。这有点超出了这个问题的范围，但例如使用 django，最小模板可能如下所示：

\n

<div class="row">\n  {% for col in cols %}\n  <div class="col-12{% if loop.last and not forloop.counter|divisibleby:2 %} col-md-6{% endif %}">\n    ...\n  </div>\n  {% endfor %}\n</div>\n

\n

或者要使用纯 css 处理它，您可以添加width针对最后一个col奇数的规则：

\n

<div class="row">\n  {% for col in cols %}\n  <div class="col-12{% if loop.last and not forloop.counter|divisibleby:2 %} col-md-6{% endif %}">\n    ...\n  </div>\n  {% endfor %}\n</div>\n

\n\n

重新排序divs

\n

使用响应式Flexorder实用程序：

\n

.row > .col-md-6:last-child:nth-child(odd) {\n  width: 100%;\n}\n

\n

\n
• order-2 order-md-1指定位置 2 位于移动设备及上方，位置 1 位于移动设备md及上方
\n
• order-1 order-md-2指定位置 1 位于移动设备及上方，位置 2 位于移动设备md及上方
\n

\n

请注意，父容器必须是Flex 容器。默认情况下，引导程序row是 Flex 的，但对于非 Flex 容器，请d-flex显式添加该类。

\n\n

最小的例子

\n

\n

\r\n

\r\n

<div class="row">\n  <div class="order-2 order-md-1">...</div>\n  <div class="order-1 order-md-2">...</div>\n  ...\n</div>\n

\r\n

.row > .col-md-6:last-child:nth-child(odd) {\n  width: 100%;\n}

\r\n

\r\n

\r\n

\n