时间戳

首页 > 解决方案 > 使用 Bootstrap 放置响应式 DIV

css - 使用 Bootstrap 放置响应式 DIV

问题描述

我需要使用Bootstrap 5DIV在它们的父容器中放置一些 s，无论它是body、tablecell还是另一个，如附图所示：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）搜索什么，我仍然找不到解决方案。

标签： csstwitter-bootstrapresponsive-designbootstrap-5getuikit

解决方案

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

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

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

调整divs 的大小

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

<div class="row g-2">
  <div class="col-12 col-md-6">...</div>
  ...
</div>
  • col-12指定移动设备及以上的全宽（12 个中的 12 个）
  • col-md-6指定半宽（6 of 12）在md及以上（即，从 开始md，此规则覆盖col-12规则）
  • g-2指定排水沟以自动填充列（或使用手动间距实用程序）

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

自动展开最后一个div

但是，如果我不知道行div内将有多少个 s，因此不知道它们的数字是奇数还是偶数，该怎么办？不知道哪个确切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%;
}

重新排序divs

使用响应式 flexorder实用程序：

<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 容器。默认情况下，引导程序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>

推荐阅读