22

我想用 twitter 的 bootstrap v2 制作一个响应式布局，带有一个列和一个地图。

这个想法是从 maps.google.com 构建一个类似的 UI，但使用带有 bootstrap2 的响应式设计。

我想有一种桌面风格

  • 顶部的导航栏
  • 1 个左栏（作为侧边栏）
    • 高度：100% 减去 navbarHeight，带有滚动条
    • 宽度：.span3
  • 填满屏幕其余部分的内容

然后对于响应式移动设计，我希望具有全高的部分具有取决于内容的高度。

我做了一个草图来更好地解释 草图

编辑：希望做这样的事情，但反应灵敏，而且只有北（导航栏）、西（侧边栏）和中心（内容）

EDIT2：我终于用 jquery 做到了，但我想要一个 CSS 解决方案。如果有人问，我会把解决方案作为答案。

EDIT3：好的，这是我使用 JQuery 找到的解决方案（我认为使用纯 js 很容易做到）

$(window).bind('resize', function() {
    if ( $(window).width() > 980 ) {
        $("#content").height(($(window).height()-40)+"px")
        $("#sidebar").height(($(window).height()-58)+"px")
        $("body").css("padding-top","40px")
    }
    else {
        $("#content").height(($(window).height()-50)+"px")
        $("#sidebar").height(($(window).height()-68)+"px")
        $("body").css("padding-top","0px")            
    }

    $("#sidebar").css("overflow", "auto")
    $("body").css("padding-bottom","0px")
    $(".navbar").css("margin-bottom","0px")
});

$(selector).css()函数和条件if可以替换为纯 CSS 和来自 CSS3 的媒体查询http://twitter.github.com/bootstrap/scaffolding.html#responsive

但问题是$(window).height()计算运行时间。也许应该用height:100%CSS 中的 a 之类的东西来代替它，这样可以解决问题，但我找不到合适的位置来放置那个100%高度。

EDIT4：在这里我发现它可能是一个纯 CSS 的解决方案！如果我取得进展，我会发布答案！ http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

4

3 回答 3

1

从我本周的调查来看（我正在尝试完成同样的事情），从纯 CSS 的角度来看，bootstrap 和 100% 高度的设计似乎是不兼容的（除非你想对 bootstrap 进行更改）。我有兴趣查看您的 jquery 解决方案。

于 2012-04-11T22:42:12.463 回答
0

我不确定我是否完全理解您要查找的内容，但请查看具有顶部菜单的http://reactivewebdesign.net/Chicago/Traffic （添加引导导航栏应该很容易）。

左列跨越 3 列，地图占据 9 列。左侧菜单中还有一个名为“我在哪里”的链接，它也使用谷歌地图。地图的 CSS 位于页面顶部。如果您希望将地图压缩为三列，只需将 3 & 9 反转为 9 & 3 - 它仍然可以工作。

希望这可以帮助。

于 2012-04-06T20:48:45.327 回答
0

这是我使用 JQuery 找到的解决方案（我认为使用纯 js 很容易做到）

$(window).bind('resize', function() {
    if ( $(window).width() > 980 ) {
        $("#content").height(($(window).height()-40)+"px")
        $("#sidebar").height(($(window).height()-58)+"px")
        $("body").css("padding-top","40px")
    }
    else {
        $("#content").height(($(window).height()-50)+"px")
        $("#sidebar").height(($(window).height()-68)+"px")
        $("body").css("padding-top","0px")            
    }

    $("#sidebar").css("overflow", "auto")
    $("body").css("padding-bottom","0px")
    $(".navbar").css("margin-bottom","0px")
});

$(selector).css()函数和条件if可以替换为纯 CSS 和来自 CSS3 的媒体查询http://twitter.github.com/bootstrap/scaffolding.html#responsive

但问题是$(window).height()计算运行时间。也许应该用height:100%CSS 中的 a 之类的东西来代替它，这样可以解决问题，但我找不到合适的位置来放置那个100%高度。

于 2015-07-08T19:21:59.310 回答