1

我正在使用 Rails 构建聊天客户端和服务器。我选择在前端使用 Bootstrap。但是我的 HTML 和 CSS 技能非常有限,而且我在创建聊天布局时遇到了麻烦,我的目标是类似于 Skype。

这是我想要实现的目标的模拟。

聊天布局

我试图让一切都保持在浏览器视口的 100%。所以聊天消息列表有一个溢出滚动。我可以获得总体布局,但我无法将其全部保留在视口中。有人可以帮忙吗?

干杯

4

1 回答 1

1

在引导程序中,您需要在声明聊天参与者列表和聊天显示所需的两列之前声明导航栏(固定顶部和导航栏折叠)。您页面的正文将类似于 col-lg-3 和 col-lg-9。假设您有 bootstrap 3.0,它将是响应式的。我不开发 Rails 应用程序,但在 Grails(Java 的类似 MVC 框架)中,您还必须删除 Grails 自动包含的默认样式,以确保 Bootstrap 是页面样式的 css。

例如,Bootstrap 页面上包含的 jumbotron 模板。省略 jumbotron 并更改正文的列宽,您应该得到与您正在努力的结果非常相似的结果。

如果您确实希望页面延伸到页面边缘,请不要包含div class='container'on line 77。

于 2013-10-29T17:29:21.763 回答