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

6yoyoihd 于 2023-06-25 发布在 Bootstrap

关注(0)|答案(1)|浏览(154)

已关闭，此问题需要details or clarity。目前不接受答复。
**想改善这个问题吗？**通过editing this post添加详细信息并澄清问题。

11天前关闭
这篇文章是编辑并提交审查5天前.
Improve this question
Bootstrap 5是否可以为两列提供响应式布局，这两列的相互垂直边框可以拖动？Answer: Yes，通过重新配置Bootstrap使用container queries而不是媒体查询。主要浏览器since Feb 2023支持容器查询。

**背景：**两个div并排堆叠成列。它们之间是可拖动的分隔符示能表示。例如，最左边的div具有设置为horizontal的css resize属性，而最右边的div具有Bootstrap类flex-grow-1。然后，用户可以向左或向右拖动分隔符示能表示。
**期望的结果：**应根据divs的单独宽度 * 选择列divs内的Bootstrap网格层，而不是依赖于视口宽度。

插图（所有灰色div都有class="col-sm-12 col-md-6 col-lg 4"）：

因此，当使用col-sm-12 col-md-6 col-lg 4类等时。在Bootstrap中，如何最好地添加逻辑以“基于父div进行测量”或“具有id #X的div”？

css

来源：https://stackoverflow.com/questions/76456722/how-to-use-specific-divs-to-measure-bootstraps-breakpoints

1条答案

按热度按时间

ekqde3dh1#

对于每个所需的Bootstrap类，例如col-sm-6、col-md-4和col-lg-3，覆盖Bootstrap的媒体查询设置的宽度，并使用基于container queries的宽度，如下所示。这允许只在CSS中进行更改，而不更改HTML和JavaScript，使用vanilla 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"><span>Sample content</div>
</div>

赞(0）回复(0）举报 2023-06-25

我来回答

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

1条答案

相关问题

热门标签

最新问答