使用 Bootstrap 进行响应式 DIV 放置

2024-01-04

我需要放置一些DIVs 在其父容器内，无论它是body, 表的cell或其他div, with 引导程序5 https://getbootstrap.com/docs/5.1/getting-started/introduction/，如附图所示：

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

最好有可能改变DIVs 顺序（如移动视图示例）。

用这个做这个没有问题UIKit https://getuikit.com/docs使用一些简单的代码，例如

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

引导程序是移动优先 https://getbootstrap.com/docs/5.1/layout/breakpoints/#core-concepts，这意味着我们在较小的断点处定义的任何内容都将级联到较大的断点，直到被覆盖。

有5个明确的断点 https://getbootstrap.com/docs/5.1/layout/breakpoints/#available-breakpoints除了隐式（默认）移动断点之外：

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

要调整大小`div`s

Use columns https://getbootstrap.com/docs/5.1/layout/columns/使用响应式断点语法：

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

col-12指定移动设备及以上设备的全宽度（12 of 12）
col-md-6指定半宽度（12 中的 6）md及以上（即，从md，该规则优先于col-12 rule)
g-2指定gutters https://getbootstrap.com/docs/5.1/layout/gutters/自动填充列（或使用手动spacing https://getbootstrap.com/docs/5.1/utilities/spacing/公用事业）

请注意，书面顺序（col-12 col-md-6 vs col-md-6 col-12) 是无关紧要的，就像任何 css 类一样。 Bootstrap 应用了以下样式移动优先 https://getbootstrap.com/docs/5.1/layout/breakpoints/#core-concepts order.

自动展开最后一个`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 if odd:

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

要重新排序`div`s

使用响应式flex order公用事业 https://getbootstrap.com/docs/5.1/utilities/flex/#order:

<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以上

请注意，父容器必须是柔性容器 https://getbootstrap.com/docs/5.1/utilities/flex/。引导程序row默认情况下是flex，但对于非flex容器，添加d-flex明确类。

最小的例子

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

<link href="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/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>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)