使用Bootstrap进行响应的div放置

2022-08-25 00:00:00 css twitter-bootstrap responsive-design bootstrap-5 getuikit

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

如果DIV为偶数，则它们应取可用宽度的50%，由2放置在单行中。或者，如果DIV为奇数，则最后一个应占可用宽度的100%，而前一个仍占可用宽度的50%，并在一行中放置2。

最好可以更改DIV的顺序(如Mobile View示例中的)。

使用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的文档(以及堆栈溢出)中搜索什么，我都找不到解决方案。

解决方案

引导是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及以上(即，从md开始，此规则覆盖col-12规则)指定半宽(第6个，共12个)
  • g-2指定gutters自动填充列(或使用手动spacing实用程序)
请注意，书写顺序(col-12 col-md-6vscol-md-6 col-12)与任何CSS类一样无关紧要。Bootstrap按mobile-first顺序应用样式。

自动展开最后div

但是，如果我不知道该行中将有多少，因此不知道它们的数字是奇数还是偶数，该怎么办？不知道哪一个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规则，以最后colif奇异：

为目标 
.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，md及以上指定位置1
  • order-1 order-md-2指定移动及以上位置1，md及以上指定位置2
请注意，父容器需要是flex container。引导row默认为flex，但对于非flex容器，请显式添加d-flex类。

最小示例

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"> 
.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>

相关文章