bootstrap-4 - 清晰设计网格

Question

当我在浏览器（例如 Firefox：iphone X）的响应视图中开发时，一切都非常合适，但是当我更改为 iphone X 浏览器（Safari 或 Chrome）时，内容位于浏览器底部菜单后面，我需要滚动查看内容。

Grid 是否没有考虑视口大小减去浏览器底部菜单的大小？

有什么提示可以克服这个问题吗？

提前致谢。

Answer 1

我设法有一个解决方法，不是理想的解决方案，但解决了问题。

移动环境中的挑战是始终可见固定的底部菜单，这是由于包装器height: 100vh中的属性。.main-container那么解决方法是什么？

被添加styles.css以定义参考高度height: 100%

html, body {
  height: 100%;
}

并且在app.component.css

.main-coontainer {
  height: 100% !important;
}

......它已经完成了。请参阅 stackblitz.com/edit/clarity-design-grid-responsive上的示例。