html - 如何将 div 内容放入移动 View 的下拉列表中

Question

第一次发帖，如果我做错了什么请说出来。

让我好好解释一下。我正在使用 HTML5、CSS3 和 Bootstrap3 构建站点。我在页面底部附近有一个区域，其中包含充当类别的各种标题，下面列出了链接。在桌面 View 中它看起来不错，但在移动 View 中看起来非常困惑和不整洁。

这个问题的一个解决方案是将标题变成下拉列表——但仅适用于移动 View 。我不知道如何执行此操作以及如何仅针对移动设备执行此操作，也许我可以使用隐藏属性以不同方式显示内容。我做了一些快速绘图来说明我想要实现的目标。

桌面 View :

http://i.imgur.com/6xpqIrC.png

移动 View :

http://i.imgur.com/By6IvE7.png

因此在移动 View 中，标题将显示为列，单击后将展开显示链接，然后可以再次单击以关闭。任何人都可以为此指出正确的方向或通过示例代码向我展示类似的解决方案，我将不胜感激，因为我是 Bootstrap 和创建响应式网站的新手。

当前桌面代码:

        <div class="header2">
        <div class="container">
        <div class="row">
        <div class="col-md-2">
        <p class="sitem grey gsm20"> Site Information </p>
        <p class="white gsm16"> About us </p>
        <p class="white gsm16"> FAQS</p>
        <p class="white gsm16"> Blog </p>
        <p class="white gsm16"> Contact Us </p>
        </div>
        <div class="col-md-2">

        <p class="sitem grey gsm20"> Service and Support </p>
        <p class="white gsm16"> My Account </p>
        <p class="white gsm16"> Payment Methods </p>
        <p class="white gsm16"> Privacy & Cookies </p>
        <p class="white gsm16"> Terms & Conditions </p>
        <p class="white gsm16"> Insurance </p>
        </div>
        <div class="col-md-2">
        <p class="sitem grey gsm20"> Delivery & Returns </p>
        <p class="white gsm16"> Delivery Tracking </p>
        <p class="white gsm16"> Delivery Prices </p>
        <p class="white gsm16"> Returns </p>
        <p class="white gsm16"> Responsibility </p>
        <p class="white gsm16"> Shipping and Handling </p>
        </div>
        <div class="col-md-2">
        <p class="sitem grey gsm20"> Contact </p>
        <p class="white gsm16"> Address Line 1 </p>
        <p class="white gsm16"> Address Line 2 </p>
        <p class="white gsm16"> Town </p>
        <p class="white gsm16"> County </p>
        <p class="white gsm16"> POST CODE </p>
        <p class="white gsm16"> 0208 961 4545 </p>
        <p class="red gsm16"> info@example.co.uk </p>
        <p class="white"> <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a> <a href="#"><i class="fa fa-twitter-square fa-2x"></i></a> </p>
        </div>
        <div class="col-md-4">
        <p class="grey gsm20"> Latest Blog Feed </p>
        <p class="white gsm16"> Lorem ipsum dolor amet, consecetur adipiscing </p>
        <p class="grey gsm16"> Posted in industrial coatings on 10th January 2015 </p>
        <p class="white gsm16"> Lorem ipsum dolor amet, consecetur adipiscing
        Lorem ipsum dolor amet, consecetur adipiscing
        Lorem ipsum dolor amet, consecetur adipiscing
        Lorem ipsum dolor amet, consecetur adipiscing</p>
        <p class="red gsm16"> Read More >> </p>

        </div>
    </div><!--Row-->
</div><!--Container-->
</div><!--Header2-->

有人可以为我指明如何实现此类解决方案的正确方向吗？我将不胜感激，因为我不确定从哪里开始，我的搜索似乎带来了不相关的文章，所以如果有人之前发现了一些有用的东西，请给我一个链接。

亲切的问候，肖恩奈勒

Answer 1

由于您已经添加了 Bootstrap 标签，我假设您知道该框架。为什么不直接使用普通的 Bootstrap 解决方案？您可以创建 2 个不同的菜单(我不推荐)并像这样隐藏其中一个:http://getbootstrap.com/css/#responsive-utilities

或者另一种解决方案是使用 Bootstrap 菜单，如本例所示:http://getbootstrap.com/examples/navbar-fixed-top/并自行定制。

总是有自己创建脚本的解决方案，但我认为当您可以只使用框架工具时，这不是必需的。