使用Bootstrap进行响应的div放置
我需要将一些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-6
vscol-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
规则,以最后col
if奇异:
.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
及以上指定位置1order-1 order-md-2
指定移动及以上位置1,md
及以上指定位置2
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>
相关文章