英文:

How to use specific divs to measure Bootstrap's breakpoints?

问题

可以使用Bootstrap 5提供的响应式布局来实现两个列，它们之间的垂直边框可以拖动。答案：是的，通过重新配置Bootstrap以使用容器查询而不是媒体查询。容器查询自2023年2月起得到了主流浏览器的支持。

背景: 两个div并排堆叠作为列。它们之间有一个可拖动的分隔符。例如，最左边的div具有设置为horizontal的resize属性，而最右边的具有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”？
1: https://getbootstrap.com/docs/
2: https://stackoverflow.com/a/76462486/2450941
3: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries
4: https://caniuse.com/css-container-queries
5: https://i.stack.imgur.com/MXCnR.png

英文:

Can Bootstrap 5 provide responsive layouts for two columns whose mutual, vertical border can be dragged? Answer: Yes, by reconfiguring Bootstrap to use container queries rather than media queries. Container queries are supported by major browsers since Feb 2023.

Background: Two divs are stacked side-by-side as columns. Between them is a draggable separator affordance. E.g., the leftmost div has the css resize property set to horizontal, while the rightmost has Bootstrap class flex-grow-1. The user can then drag the separator affordance to the left or right.

Desired outcome: Bootstrap's grid tiers inside the column divs should be chosen based on the divs' individual widths as opposed to relying on the viewport width.

Illustration (all gray divs have class="col-sm-12 col-md-6 col-lg 4"):

So, when using the col-sm-12 col-md-6 col-lg 4classes etc. in Bootstrap, how to best add logic to “do measurements based on the parent div” or “div with id #X”?

答案1

得分: 0

对于每个所需的 Bootstrap 类，例如 col-sm-6、col-md-4 和 col-lg-3，覆盖 Bootstrap 媒体查询设置的宽度，使用基于容器查询的宽度，如下所示。这允许仅在 CSS 中进行更改，无需更改 HTML，也无需 JavaScript，只需在需要的地方添加一个 ucq（“use container queries”）类。

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"><span>示例内容</div>
</div>

<details>
<summary>英文:</summary>

For each desired Bootstrap class, e.g. `col-sm-6`,`col-md-4` and `col-lg-3`, override the width set by Bootstrap&#39;s media queries and use a width based on [container queries][1], as below. This allows the changes to be done only in CSS, with no changes to the HTML and no JavaScript, using vanilla Bootstrap classes, just adding a `ucq` (“use container queries”) class where desirable.

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:

    &lt;div class=&quot;row container-query-target ucq&quot;&gt;
        &lt;div class=&quot;test col-sm-6 col-md-4 col-lg-3&quot;&gt;&lt;span&gt;Sample content&lt;/div&gt;
    &lt;/div&gt;


  [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries

</details>