Question

我开始使用bootstrap并遇到问题。我希望在桌面视图中有一个下拉菜单，但希望在移动视图中隐藏它。

我为父项设置了<a href="">（现在是www.example.com）。由于它用于显示下拉链接无处可去，这在我在桌面上时很好。

我需要的是能够隐藏移动设备中的下拉菜单并让用户访问第一个项目的链接。因此整个<ul>将被隐藏。我尝试使用.hidden-xs类但它只是隐藏<ul>而不使用提供的 href 。

我应该只创建两个不同的菜单，一个用于大型设备，另一个用于移动设备？

提前致谢

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="http://www.example.com">
    Item 1
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
  </ul>
</div>

Answer 1

我会使用IF条件进行javascript检测，看看你是否在移动设备上，并根据返回的内容显示它。

这是一个网站，它显示了多种方法来检测您是在移动浏览器上还是不包含javascript文件。我可以显示javascript代码，但它非常长而且模糊不清。当然，根据您使用的技术堆栈，任何这些都可以。

http://detectmobilebrowsers.com/

Answer 2

您可以使用CSS执行此操作，但根据您的最终实施情况，它可能效率不高。

您可以在所需的媒体查询中将class Register(View): # Object variables trigger = 0; logged_in = False; re_attempts = 0; def LoadLoginPage(self, request, message): return render(request, 'login.html', {'title' : 'Login Page', 'panel_message' : message}); def get(self, request): if(self.trigger == 0): return self.LoadLoginPage(request, "Login here !");显示属性更改为内联块/块（例如768px），然后为除{{1}的第一个孩子以外的所有孩子设置dropdown-menu同时在下拉按钮中添加hidden-xs以隐藏它。

请参阅“完整页面”中的工作示例，然后缩小浏览器窗口以查看更改。

display: none

dropdown-menu li

Bootstrap：移动时隐藏下拉菜单并链接到父级

2 个答案: