隐藏Derek Eder的融合表模板的左侧边栏

Question

如何隐藏Fusion table template的左侧边栏？ 在手机的宽度上，左侧边栏将显示在地图的顶部。 如何将其隐藏在可折叠的导航栏？ 我有几个自定义过滤器。能够在移动设备上隐藏它们会很好。否则，您需要向下滚动以查看地图，该地图不方便用户使用。谢谢！

---

好吧，但那只能解决部分问题。左侧边栏将显示在内部 *div class="collapse navbar-collapse"* 因此，当用户点击导航栏时，它会弹出。像this

---

我刚刚发现this website具有相同的功能，也就是显示左侧栏上，一方面桌面版本，和塌陷侧边栏在另一方面移动版本。 和the related stackoverflow question。

但是the accepted render view只折叠侧边栏而没有将其置于移动版本的顶部;相反，它把它放在左边。

我不确定将左边栏折叠并在移动版本顶部显示它是微不足道的？

Answer 1

你可以做这样的事情：

@media(max-width:760px) 
{ 
    #yourelement{ 
    display:none; 
    } 
} 

它说的，当你的窗口下760px宽，你让元素目标由ID =“yourelement”要隐藏。

Answer 2

您也可以使用不同的模板，用于较窄的屏幕：https://github.com/derekeder/FusionTable-Map-Template#iframe-template