如何使用特定的div来测量Bootstrap的断点？ [已关闭]

Question

Bootstrap 5能否为可以拖动相互垂直边框的两列提供响应式布局？ 答案：是的，通过重新配置 Bootstrap 以使用容器查询而不是媒体查询。 自 2023 年 2 月起，主流浏览器都支持容器查询。

背景： 两个 div 并排堆叠为列。它们之间是一个可拖动的分隔符可供性。例如，最左侧的 div 的 css resize

 属性设置为 

horizontal

，而最右侧的 Bootstrap 类 

flex-grow-1

。然后，用户可以将分隔符向左或向右拖动。

期望的结果：列div内的Bootstrap网格层应根据div的单独宽度来选择而不是依赖于视口宽度。

插图（所有灰色div都有

class="col-sm-12 col-md-6 col-lg 4"

）：

那么，当在Bootstrap中使用

col-sm-12 col-md-6 col-lg 4

类等时，如何最好地添加逻辑“基于父div进行测量”或“id为#X的div”？

Answer 1

对于每个所需的 Bootstrap 类，例如

col-sm-6

、

col-md-4

和

col-lg-3

，覆盖Bootstrap媒体查询设置的宽度并使用基于

容器查询的宽度，如下所示。这允许仅在 CSS 中完成更改，无需更改 HTML 和 JavaScript，使用普通 Bootstrap 类，只需在需要时添加 ucq

（“使用容器查询”）类。

CSS：

.container-query-target { container-type: inline-size; }

/* ucq: use container queries */
.ucq .col-sm-6,
.ucq .col-md-4,
.ucq .col-lg-3,
{ width: 100%; }

@container (min-width:576px) {
    .ucq .col-sm-6 { width: 50%; }
}
@container (min-width:768px) {
    .ucq .col-md-4 { width: 33.33333333%; }
}
@container (min-width:992px) {
    .ucq .col-lg-3 { width: 25%; }
}

HTML：

<div class="row container-query-target ucq">
    <div class="test col-sm-6 col-md-4 col-lg-3">Sample content</div>
</div>