Question

我试图找出使用Bootstrap设计响应式搜索结果页面的最佳方法。在桌面上，我计划在左侧显示结果列表，在右侧显示地图 - 类似于https://www.google.com/maps/search/bars+near+10001/@40.751591,-73.9957831,15z/am=t。

但是在较小的设备上，我想在列表和地图结果之间有两个按钮（切换）。我只是不确定如何使用bootstrap。

Answer 1

您可以在没有任何javascript的情况下关闭hidden-xs和visible-xs： http://www.bootply.com/aIwaKqchLW

<div class="col-xs-12 visible-xs">
  <button class="btn btn-sm btn-default">Show Map</button>
</div>
...
<div class="col-sm-6 hidden-xs">
  <h2>Map</h2>

然后使用附在按钮上的js切换地图或结果的可见性......我现在没有时间整理出来:(也许如果没有其他人我会回来

设计响应式地图搜索结果

1 个答案: