【问题标题】:Is it possible to have Bootstrap work off of a <div>'s width instead of the viewport width?是否可以让 Bootstrap 使用 <div> 的宽度而不是视口宽度?
【发布时间】:2021-10-05 11:45:57
【问题描述】:

在我们的网站上,我们使用 Bootstrap v3 网格系统来控制页面的布局。当用户调整浏览器窗口的大小时,引导系统会启动并且一切正常。

我们有一个新的用例,用户需要为给定的浏览器宽度设计一个页面,但我们希望他们这样做而无需调整自己的浏览器大小。

我们有一个包装内容的外层,并设置为一个固定的,我们希望 Bootstrap 检查该内容的宽度并根据该宽度应用响应式布局,而不是浏览器窗口宽度。

这可能吗?如果是这样,有人可以向我指出如何实现这一目标的示例或文档吗?

【问题讨论】:

  • 你有没有考虑过用框架导入它,我知道,但它应该为查看端口提供正确的尺寸
  • 这个还没试过,可能有用,会考虑试试
  • 您还可以查看浏览器检查工具是如何做到这一点的。他们能够快速在视口/设备类型之间切换,而无需大惊小怪。
  • 是的,这很好,我正在搜索,但只找到有关如何使用浏览器工具而不是如何更改窗口大小的内容

标签: javascript html css twitter-bootstrap-3


【解决方案1】:

我最近有一个类似的案例,并使用ResizeObserver 来观察元素的宽度,以作为 CSS 的基础,而不是视口。了解更多:

https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/

https://www.w3.org/TR/resize-observer/

注意:目前仅 Chrome 支持此功能

跟进:CSS 容器查询已于 2021 年 4 月发布,但尚无浏览器支持 – https://caniuse.com/css-container-queries

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-12-08
    • 2013-10-01
    • 2019-08-11
    • 2012-12-01
    相关资源
    最近更新 更多