使用 Bootstrap 放置响应式 DIV答案

【问题标题】：Responsive DIVs placement with Bootstrap使用 Bootstrap 放置响应式 DIV
【发布时间】：2021-10-26 18:33:08
【问题描述】：

我需要在它们的父容器中放置一些DIVs，无论是body，表的cell还是另一个div，与Bootstrap 5，如附图所示：

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

【问题讨论】：

标签： css twitter-bootstrap responsive-design bootstrap-5 getuikit

【解决方案1】：

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

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

| Breakpoint | Dimensions
|------------|----------- 
| NONE       | <576px
| sm         | ≥576px
| md         | ≥768px
| lg         | ≥992px
| xl         | ≥1200px
| xxl        | ≥1400px

调整`div`s的大小

将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 自动填充列（或使用手动 spacing 实用程序）

请注意，书面顺序（col-12 col-md-6 vs col-md-6 col-12）是无关紧要的，与任何 css 类一样。 Bootstrap 按mobile-first 顺序应用样式。

自动展开最后一个`div`

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

如果您使用模板语言，我建议将此逻辑放入模板中。这有点超出这个问题的范围，但例如使用 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%;
}

重新排序`div`s

使用响应式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 在 mobile 及以上，位置 1 在 md 及以上
order-1 order-md-2 指定位置 1 在移动及以上，位置 2 在md 及以上

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

小例子

.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>

【讨论】：

@tdy 另外我应该删除最后一个DIV 的col-md-6 以使其宽度为100%。但是，如果我不知道row 中有多少DIVs，因此不知道它们的数量是奇数还是偶数怎么办？不知道哪个确切的 DIV 将是最后一个，但仍需要容器内的最后一个 DIV 为 100% 宽度
还有一件事......如何摆脱那些默认边距？他们甚至破坏了您的示例，使内容比其容器更宽。
@tdy >这听起来像是在某种模板语言中完成的......不，它只是一些新闻文章，可以在一天中改变。
@tdy 非常感谢您如此详细地解释每个步骤。您的解决方案确实有效并回答了我的问题，因此我将其标记为答案。但现在只有我一个人坚信 Bootstrap 的方法过于复杂且文档记录不充分吗？
@Pimpfru 不客气。回复：引导程序的复杂性，我很难说，因为（a）我已经使用了很长时间，（b）我对替代方案不太熟悉。我确实记得在听到“移动优先”解释之前一直在为断点语法苦苦挣扎，这就是我喜欢提及这一点的原因。此外，当我看到您的 UIKit 示例（自动展开最后一个 div）时，它看起来确实很吸引人。在 Bootstrap 的辩护中，它是（之一）同类产品中的第一个，因此其他所有人都有机会对其进行迭代。

调整divs的大小

自动展开最后一个div

重新排序divs

小例子

调整`div`s的大小

自动展开最后一个`div`

重新排序`div`s